open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change layout in lower resolutions

Browse Source
This commit is contained in:
Rob Garrison 2019-03-10 22:07:20 -05:00
parent cd309aae03
commit 84163ba64f
4 changed files with 62 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_locales/en/messages.json
View File

@ -418,6 +418,10 @@
"message": "Enabled",
"description": "Used in various lists/options to indicate that something is enabled"
},
"genericFilterLabel": {
"message": "Filter",
"description": "Used in various lists/options to indicate that something is or will be filtered"
},
"genericError": {
"message": "Error",
"description": "Used in various places to indicate some error occurred."

31
manage.html
View File

@ -31,6 +31,7 @@
<template data-id="style">
<div class="entry hide-extra">
<div class="entry-col entry-filter">
<span class="col-label" i18n-text="genericFilterLabel"></span>
<label class="checkmate" tabindex="0">
<input class="entry-filter-toggle" type="checkbox">
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
@ -41,6 +42,7 @@
</label>
</div>
<div class="entry-col entry-state">
<span class="col-label" i18n-text="genericEnabledLabel"></span>
<label class="checkmate" tabindex="0">
<input class="entry-state-toggle" type="checkbox">
<svg class="svg-icon checkbox"viewBox="0 0 10 10">
@ -51,10 +53,12 @@
</label>
</div>
<a href="#" class="entry-col entry-name">
<span class="col-label" i18n-text="genericName"></span>
<span class="entry-name-text"></span>
<span class="entry-labels"></span>
</a>
<div class="entry-col entry-actions">
<span class="col-label" i18n-text="optionsActions"></span>
<a href="#" class="entry-configure-usercss tt-e" i18n-data-title="configureStyle">
<svg class="svg-icon entry-config" viewBox="0 0 24 24">
<path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5
@ -100,9 +104,16 @@
</svg>
</a>
</div>
<div class="entry-col entry-version"></div>
<div class="entry-col entry-last-update tt-w"></div>
<div class="entry-col entry-version">
<span class="col-label">v#</span>
<span class="entry-version-value"></span>
</div>
<div class="entry-col entry-last-update tt-w">
<span class="col-label" i18n-text="searchResultUpdated"></span>
<span class="entry-last-update-value"></span>
</div>
<div class="entry-col entry-applies-to">
<span class="col-label" i18n-text="appliesLabel"></span>
<div class="targets"></div>
</div>
</div>
@ -487,16 +498,24 @@
<path d="M6.42 7.58L2.92 3.5h8.75l-3.5 4.08v4.09c-1 0-1.75-.76-1.75-1.75V7.58z"/>
</svg>
</div>
<a href="#" class="entry-col sortable header-state center-text tt-se" i18n-text="genericEnabledLabel" i18n-data-title="sortLabel;sortColumnEnabled" data-type="enabled"><span></span></a>
<a href="#" class="entry-col sortable header-state center-text tt-se" i18n-text="genericEnabledLabel" i18n-data-title="sortLabel;sortColumnEnabled" data-type="enabled">
<span></span>
</a>
<div class="entry-col header-name">
<a href="#" class="sortable tt-se" i18n-text="genericName" i18n-data-title="sortLabel;sortColumnName" data-type="title"><span></span></a>
<a href="#" class="sortable tt-se" i18n-text="genericName" i18n-data-title="sortLabel;sortColumnName" data-type="title">
<span></span>
</a>
</div>
<div class="entry-col header-actions" i18n-text="optionsActions"></div>
<div class="entry-col header-version">
<a href="#" class="sortable tt-sw" i18n-data-title="sortLabel;sortColumnVersion" data-type="version">v#<span></span></a>
<a href="#" class="sortable tt-sw" i18n-data-title="sortLabel;sortColumnVersion" data-type="version">
v#<span></span>
</a>
</div>
<div class="entry-col header-last-update center-text">
<a href="#" class="entry-col sortable tt-sw" i18n-text="searchResultUpdated" i18n-data-title="sortLabel;sortColumnLastUpdate" data-type="dateUpdated"><span></span></a>
<a href="#" class="sortable tt-sw" i18n-text="searchResultUpdated" i18n-data-title="sortLabel;sortColumnLastUpdate" data-type="dateUpdated">
<span></span>
</a>
<a href="#" id="update-history" class="tt-sw" i18n-data-title="genericHistoryLabel" tabindex="0">
<svg class="svg-icon update-history" viewBox="0 0 24 24" i18n-alt="updateCheckHistory">
<path d="M20.8 10.86a7 7 0 0 0-1.53-1.47V7.02L13.35 1H5.47c-1.08 0-1.96.9-1.96 2L3.5

4
manage/manage-ui.js
View File

@ -155,9 +155,9 @@ const UI = {
$('.entry-updater-placeholder', entry).replaceWith(template.updaterIcons.cloneNode(true));
}
$('.entry-version', entry).textContent = style.usercssData && style.usercssData.version || '';
$('.entry-version-value', entry).textContent = style.usercssData && style.usercssData.version || '';
const lastUpdate = $('.entry-last-update', entry);
const lastUpdate = $('.entry-last-update-value', entry);
lastUpdate.textContent = UI.getDateString(style.updateDate);
// Show install & last update in title
lastUpdate.dataset.title = [

31
manage/manage.css
View File

@ -235,6 +235,10 @@ body.all-styles-hidden-by-filters #installed:after {
line-height: var(--entry-height);
}
.entry-col .col-label {
display: none;
}
.center-text,
.entry-filter,
.entry-state,
@ -968,3 +972,30 @@ a svg, .svg-icon.sort {
#backup-buttons .dropdown-content #sync-dropbox-import:hover {
background: transparent;
}
@media (max-width: 768px) {
#installed .entry, #installed .entry-header {
display: block;
}
.entry-col {
width: 100%;
padding: 0;
margin-left: 4px;
}
.entry-name-text {
max-width: unset;
}
.entry-col .col-label {
display: inline-block;
font-weight: bold;
margin-right: 6px;
padding: 0;
}
.center-text, .entry-filter, .entry-state, .entry-last-update {
text-align: left;
max-width: unset;
}
.targets {
display: inline-block;
}
}