From 6d4cc71b96badd8ee6d9903703809e87b7c481c6 Mon Sep 17 00:00:00 2001 From: Henrique Dias Date: Fri, 30 Dec 2016 22:57:14 +0000 Subject: [PATCH] updates Former-commit-id: 52b1e8da514f4b7b76d4e3d69294d71f4b0c9e5b --- _embed/public/css/fonts.css | 134 +++ _embed/public/css/normalize.css | 461 ++++++++ _embed/public/css/styles.css | 1845 ++++++++++++------------------- _embed/public/js/listing.js | 39 +- _embed/templates/base.tmpl | 26 +- _embed/templates/listing.tmpl | 88 +- handlers/listing.go | 32 +- page/page.go | 15 +- 8 files changed, 1384 insertions(+), 1256 deletions(-) create mode 100644 _embed/public/css/fonts.css create mode 100644 _embed/public/css/normalize.css diff --git a/_embed/public/css/fonts.css b/_embed/public/css/fonts.css new file mode 100644 index 00000000..0e78c2c0 --- /dev/null +++ b/_embed/public/css/fonts.css @@ -0,0 +1,134 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-cyrillic-ext.woff2) format('woff2'); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-cyrillic.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-greek-ext.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-greek.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-vietnamese.woff2) format('woff2'); + unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-latin-ext.woff2) format('woff2'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-cyrillic-ext.woff2) format('woff2'); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-cyrillic.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-greek-ext.woff22) format('woff2'); + unicode-range: U+1F00-1FFF; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-greek.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-vietnamese.woff2) format('woff2'); + unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-latin-ext.woff2) format('woff2'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} + +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: local('Material Icons'), local('MaterialIcons-Regular'), url(material/icons.woff2) format('woff2'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} \ No newline at end of file diff --git a/_embed/public/css/normalize.css b/_embed/public/css/normalize.css new file mode 100644 index 00000000..01ee6971 --- /dev/null +++ b/_embed/public/css/normalize.css @@ -0,0 +1,461 @@ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/_embed/public/css/styles.css b/_embed/public/css/styles.css index 495fa6b9..7d6c4173 100644 --- a/_embed/public/css/styles.css +++ b/_embed/public/css/styles.css @@ -1,1013 +1,13 @@ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-cyrillic-ext.woff2) format('woff2'); - unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-cyrillic.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-greek-ext.woff2) format('woff2'); - unicode-range: U+1F00-1FFF; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-greek.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-vietnamese.woff2) format('woff2'); - unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), url(roboto/normal-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-cyrillic-ext.woff2) format('woff2'); - unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-cyrillic.woff2) format('woff2'); - unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-greek-ext.woff22) format('woff2'); - unicode-range: U+1F00-1FFF; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-greek.woff2) format('woff2'); - unicode-range: U+0370-03FF; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-vietnamese.woff2) format('woff2'); - unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-latin-ext.woff2) format('woff2'); - unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: local('Roboto Medium'), local('Roboto-Medium'), url(roboto/medium-latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} - -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - src: local('Material Icons'), local('MaterialIcons-Regular'), url(material/icons.woff2) format('woff2'); -} - -.material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 24px; - line-height: 1; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-feature-settings: 'liga'; - -webkit-font-smoothing: antialiased; -} - -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100% -} - -body { - margin: 0 -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block -} - -audio, -canvas, -progress, -video { - display: inline-block -} - -video { - max-width: 100%; -} - -audio:not([controls]) { - display: none; - height: 0 -} - -progress { - vertical-align: baseline -} - -template, -[hidden] { - display: none -} - -a { - background-color: transparent; - -webkit-text-decoration-skip: objects -} - -a:active, -a:hover { - outline-width: 0 -} - -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted -} - -b, -strong { - font-weight: inherit -} - -b, -strong { - font-weight: bolder -} - -dfn { - font-style: italic -} - -h1 { - font-size: 2em; - margin: 0.67em 0 -} - -mark { - background-color: #ff0; - color: #000 -} - -small { - font-size: 80% -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline -} - -sub { - bottom: -0.25em -} - -sup { - top: -0.5em -} - -img { - border-style: none; - max-width: 100%; -} - -svg:not(:root) { - overflow: hidden -} - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em -} - -figure { - margin: 1em 40px -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible -} - -button, -input, -select, -textarea { - font: inherit; - margin: 0 -} - -optgroup { - font-weight: bold -} - -button, -input { - overflow: visible -} - -button, -select { - text-transform: none -} - -button, -.button, -html [type="button"], -[type="reset"], -[type="submit"] { - /* -webkit-appearance: button; */ - text-decoration: none; - color: #fff !important; - background-color: #26a69a; - text-align: center; - letter-spacing: .5px; - -webkit-transition: .2s ease-out; - transition: .2s ease-out; - cursor: pointer; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - border: none; - border-radius: 2px; - display: inline-block; - height: 2.25em; - line-height: 2.25em; - outline: 0; - padding: 0 2rem; - text-transform: uppercase; - vertical-align: middle; - -webkit-tap-highlight-color: transparent; -} - -button::-moz-focus-inner, -.button::-moz-focus-inner, -. [type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0 -} - -button:-moz-focusring, -.button:-moz-focusring, -, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted; -} - -fieldset { - border: none; - margin: 0; - padding: 0; - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; -} - -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal -} - -textarea { - overflow: auto -} - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - padding: 0 -} - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto -} - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none -} - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54 -} - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit -} - - -/* TANANANA */ - body { font-family: 'Roboto', sans-serif; - padding-top: 9em; + padding-top: 7.8em; background-color: #f8f8f8; - text-rendering: optimizespeed; } -a { - text-decoration: none; - color: #006ed3; -} - -a:hover, -h1 a:hover { - color: #319cff; -} - -#summary, -header { - padding-right: 7%; - padding-left: 7%; -} - -td:first-child, -th:first-child { - padding-left: 1em; -} - -td:last-child, -th:last-child { - padding-right: 1em; -} - -h1 { - font-size: 1.5em; - font-weight: normal; - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -h1 a { - color: inherit; -} - -h1 a:hover { - text-decoration: underline; -} - -main { - display: block; -} - -.meta-item { - margin-right: 1em; -} - -table { - width: 100%; - border-collapse: collapse; -} - -tr { - cursor: pointer; - -webkit-transition: 0.1s ease all; - transition: 0.1s ease all; - border-bottom: 1px dashed #dadada; -} - -tr.selected { - background-color: #ccc; -} - -td, -th { - padding: 1em 0; - text-align: left; -} - -th { - font-size: 16px; - padding-top: 15px; - padding-bottom: 15px; - white-space: nowrap; -} - -th a { - color: black; -} - -th svg { - vertical-align: middle; -} - -td { - font-size: 14px; -} - -td:first-child { - width: 50%; -} - -td:last-child, -th:last-child { - text-align: right; -} - -td:first-child svg { - position: absolute; -} - -td .goup, -td .name { - margin-left: 1.1em; - vertical-align: middle; - white-space: pre-wrap; - word-break: break-all; - color: #424242; - overflow-wrap: break-word; -} - -footer { - font-size: 0.6em; - margin: 3em 0 2em; - text-align: center; - color: grey; -} - -footer a, -footer a:hover { - color: inherit; -} - -.container { - width: 95%; - max-width: 960px; - margin: 0 auto; -} - -pre { - padding: 1em; - border: 1px solid #e6e6e6; - border-radius: 0.5em; - background-color: #f5f5f5; - white-space: pre-wrap; - /* css-3 */ - white-space: -moz-pre-wrap; - /* Mozilla, since 1999 */ - white-space: -pre-wrap; - /* Opera 4-6 */ - white-space: -o-pre-wrap; - /* Opera 7 */ - word-wrap: break-word; - /* Internet Explorer 5.5+ */ -} - -@media (max-width: 600px) { - td:first-child { - width: auto; - } - td:nth-child(2), - th:nth-child(2) { - padding-right: 5%; - text-align: right; - } -} - - -/* MY STYLES */ - * { box-sizing: border-box; } -#token { - display: none; -} - - -/* MATERIAL ICONS */ - -.material-icons { - font-family: 'Material Icons'; - font-size: 1.5em; - font-weight: normal; - font-style: normal; - line-height: 1; - /* Preferred icon size */ - display: inline-block; - white-space: nowrap; - letter-spacing: normal; - text-transform: none; - word-wrap: normal; - direction: ltr; - /* Support for all WebKit browsers. */ - -webkit-font-smoothing: antialiased; - /* Support for Safari and Chrome. */ - text-rendering: optimizeLegibility; - /* Support for Firefox. */ - -moz-osx-font-smoothing: grayscale; - /* Support for IE. */ - -webkit-font-feature-settings: 'liga'; - font-feature-settings: 'liga'; -} - - -/* HEADER */ - -header { - z-index: 1000; - background-color: #fff; - border-bottom: 1px solid rgba(0, 0, 0, 0.075); - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - position: fixed; - top: 0; - left: 0; - width: 100%; - padding: 0; -} - -header h1 { - font-size: 2em; - margin: 0; -} - -header a, -header a:hover, -#toolbar a, -#toolbar a:hover { - color: inherit; -} - -header p {} - -header p i { - font-size: 1em !important; - color: rgba(255, 255, 255, .31); -} - -header #logout { - /* background-color: rgba(0, 0, 0, 0.05); */ - border-radius: 0; - margin: 0 0 0 auto; - padding: .2em; -} - -#search { - position: relative; - display: inline-block; - height: 100%; - padding: 0.75em; - vertical-align: middle; - border-radius: 0.3em; - background-color: #f5f5f5; - transition: .1s ease all; -} - -#search.active { - background-color: #fff; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); -} - -#search.active i, -#search.active input { - color: #212121; -} - -#search i, -#search input { - vertical-align: middle; -} - -#search i { - margin-right: 0.3em; - /* color: rgba(255, 255, 255, .5); */ - user-select: none; -} - -#search input { - min-width: 20em; - border: 0; - outline: 0; - /* color: rgba(255, 255, 255, 0.72); */ - background-color: transparent; -} - -#search.active div { - visibility: visible; - opacity: 1; - top: 100%; -} - -#search ul { - padding: 0; - margin: 0; - list-style: none; -} - -#search li { - margin-bottom: .5em; -} - -#search>div { - position: absolute; - top: 0; - width: 100%; - left: 0; - z-index: 999999; - background-color: #fff; - text-align: left; - color: #ccc; - box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .12); - padding: .5em; - border-bottom-left-radius: .3em; - border-bottom-right-radius: .3em; - transition: .1s ease all; - visibility: hidden; - opacity: 0; - overflow-x: hidden; - overflow-y: auto; - max-height: 50vh; -} - -#search>div div { - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; -} - -#search>div p { - width: 100%; - text-align: center; - display: none; - margin: 0; - max-width: none; -} - -#search.ongoing p { - display: block; -} - -#search.active div i, -#sidebar #search.active div i { - color: #ccc; - text-align: center; - margin: 0 auto; - display: table; -} - -#search::-webkit-input-placeholder { - /* WebKit, Blink, Edge */ - color: rgba(255, 255, 255, .5); -} - -#search:-moz-placeholder { - opacity: 1; - /* Mozilla Firefox 4 to 18 */ - color: rgba(255, 255, 255, .5); -} - -#search::-moz-placeholder { - opacity: 1; - /* Mozilla Firefox 19+ */ - color: rgba(255, 255, 255, .5); -} - -#search:-ms-input-placeholder { - /* Internet Explorer 10-11 */ - color: rgba(255, 255, 255, .5); -} - - -/* BREADCRUMB */ - -header>div:last-child>div:first-child>* { - display: inline-block; - vertical-align: middle; -} - -header>div:last-child>div:first-child>i { - margin-right: .3em; -} - -#breadcrumbs-button { - padding: .4em 0.3em; - border-radius: .1em; - cursor: pointer; - transition: .1s ease all; -} - -#breadcrumbs-button.active, -#breadcrumbs-button:hover { - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - background: #fff; -} - -#current-file { - line-height: 2.7em; -} - -#breadcrumbs { - transition: .1s ease all; - padding: 0; - margin: 0; - list-style: none; - display: inline-flex; - flex-direction: column; - border-radius: 2px; - border-top-left-radius: 0; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); - background: #fff; - position: absolute; - left: 0; - top: 2.3em; - min-width: 7em; - z-index: 999; - opacity: 0; - visibility: hidden; - color: #656565; -} - -#breadcrumbs.active { - opacity: 1; - visibility: visible; -} - -#breadcrumbs li { - line-height: 1.5em; - padding: .3em; -} - - -/* MORE STUFF */ - -header>div { - display: flex; - width: 100%; - padding: 0.5em 0.5em 0.5em 1em; -} - -header>div:first-child>div:nth-child(1) { - margin-right: 1em; - font-weight: 500; - font-size: 1.5em; - line-height: 2; -} - -header>div:last-child { - background-color: #fafafa; - border-top: 1px solid rgba(0, 0, 0, 0.075); - border-bottom: 1px solid rgba(0, 0, 0, 0.075); -} - -header>div div { - vertical-align: middle; - position: relative; -} - -header .actions { - margin-left: auto; -} - -header #file-only { - display: inline-block; - border-right: 1px solid rgba(0, 0, 0, 0.075); - padding-right: .3em; - margin-right: .3em; - transition: .2s ease all; - visibility: visible; -} - -#file-only.disabled { - opacity: 0; - visibility: hidden; -} - -header p { - display: inline-block; - margin: 0; - vertical-align: middle; -} - -header #open-nav { - display: none; -} - -header p a, -header p a:hover { - color: inherit; -} - -header>div div:nth-child(2) {} - -.action:hover ul { - display: flex; -} - -#prev { - border-radius: 0; -} - -.action ul { - position: absolute; - top: 3.1em; - left: 0; - color: #7d7d7d; - list-style: none; - margin: 0; - padding: 0; - background: #fff; - box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); - border-radius: .2em; - flex-direction: column-reverse; - display: none; - transition: .2s ease all; - min-width: 3em; - z-index: 99999; -} - -.action ul:before { - top: -16px; - left: 1em; - right: auto; - border: 8px solid transparent; - border-bottom-color: #ffffff; - content: ''; - position: absolute; -} - -.action ul a { - padding: .3em .5em; - border-bottom: 1px solid #f5f5f5; - transition: .2s ease all; - text-align: left; -} - -.action ul a:first-child { - border: 0; - border-bottom-right-radius: .2em; - border-bottom-left-radius: .2em; -} - -.action ul a:last-child { - border-top-right-radius: .2em; - border-top-left-radius: .2em; -} - -.action ul a:hover { - background-color: #f5f5f5; -} - -.action { - display: inline-block; - cursor: pointer; - -webkit-transition: 0.2s ease all; - transition: 0.2s ease all; - border: 0; - margin: 0; - color: #546E7A; - border-radius: 50%; -} - -.action.disabled { - opacity: 0.2; - cursor: not-allowed; -} - -.action i { - padding: 0.4em; - -webkit-transition: 0.2s ease-in-out all; - transition: 0.2s ease-in-out all; - border-radius: 50%; -} - -.action:hover i { - background-color: rgba(0, 0, 0, .1); -} - -header .action span { - display: none; -} - -.floating { - position: fixed; - bottom: 1em; - right: 1em; -} - -.floating .action { - background-color: #2196f3 !important; - color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); -} - -#newdir { - position: fixed; - bottom: 1.3em; - right: 5em; - transition: .2s ease all; - opacity: 0; - border: 0; - box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); - padding: .5em; - width: 22em; - border-radius: .2em; -} - -#newdir.enabled { - opacity: 1; -} - *, *:hover, *:active, @@ -1015,180 +15,36 @@ header .action span { outline: 0 } - -/* LISTING */ - -#listing { - max-width: calc(100% - 1.2em); - width: 100%; +a { + text-decoration: none; } -#listing h2 { - margin: 0 0 0 0.5em; - font-size: 1em; - color: rgba(0, 0, 0, 0.2); - font-weight: 500; -} - -#listing.list h2 { - display: none; -} - -#listing>div { - display: flex; - padding: 0; - flex-wrap: wrap; - justify-content: flex-start; - position: relative; -} - -#listing.list { - flex-direction: column; - margin-top: 2em; - width: 100%; +img { max-width: 100%; } -#listing .item { - margin: .5em; - padding: 0.5em; - transition: 0.2s ease border; - border-radius: 0.2em; - background-color: #fff; - box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); - position: relative; - width: calc(33% - 1em); - display: flex; - flex-wrap: nowrap; - color: #6f6f6f; - transition: .1s ease all; -} - -.item div:first-of-type { - width: 5em; -} - -.item div:last-of-type { - width: calc(100% - 5vw); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.item p { - font-size: 0.9em; - margin: 0; -} - -.item span { - font-weight: bold; -} - -.item i { - font-size: 4em; - margin-right: 0.1em; - vertical-align: bottom; -} - -#listing .item.header { - display: none !important; - background-color: #ccc; -} - -#listing.list .item.header { - display: flex !important; - background: #fafafa; - position: fixed; - width: 100%; - top: 8em; - left: 0; - z-index: 999; -} - -#listing.list .item.header>div:first-child { - width: 0; -} - -#listing.list .item.header>div:last-child { - /* width: 100%; */ -} - -#listing.list .item.header>div:last-child *:first-child { - margin-right: 3em; -} - -#listing.list .item { - width: 100%; - margin: 0; - border: 0; - box-shadow: none; - border-radius: 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); +pre { padding: 1em; + border: 1px solid #e6e6e6; + border-radius: 0.5em; + background-color: #f5f5f5; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; } -#listing .item:hover { - box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important; +.container { + width: 95%; + max-width: 960px; + margin: 0 auto; } -#listing.list .item:hover { - box-shadow: none !important; -} - -#listing .item[aria-selected=true] { - background: #2196f3 !important; - color: #fff !important; -} - -#listing.list .item div:first-of-type { - width: 3em; -} - -#listing.list .item div:first-of-type i { - font-size: 2em; -} - -#listing.list .item div:last-of-type { - width: calc(100% - 3em); - display: flex; - align-items: center; -} - -#listing .item div:last-of-type * { - text-overflow: ellipsis; - overflow: hidden; -} - -#listing.list .item div:last-of-type span { - width: 50%; -} - -#listing.list .item div:last-of-type p:first-of-type { - width: 25%; -} - - -/* ANIMATIONS */ - i.spin { - -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite; } -@-webkit-keyframes spin { - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); - } -} - -@keyframes spin { - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); - } -} - /* EDITOR */ @@ -1339,4 +195,671 @@ i.spin { display: inline-block; text-align: right; float: right; +} + + +/* * * * * * * * * * * * * * * * + * ACTION * + * * * * * * * * * * * * * * * */ + +.action { + display: inline-block; + cursor: pointer; + -webkit-transition: 0.2s ease all; + transition: 0.2s ease all; + border: 0; + margin: 0; + color: #546E7A; + border-radius: 50%; +} + +.action.disabled { + opacity: 0.2; + cursor: not-allowed; +} + +.action i { + padding: 0.4em; + -webkit-transition: 0.2s ease-in-out all; + transition: 0.2s ease-in-out all; + border-radius: 50%; +} + +.action:hover i { + background-color: rgba(0, 0, 0, .1); +} + +.action:hover ul { + display: flex; +} + +.action ul { + position: absolute; + top: 3.1em; + left: 0; + color: #7d7d7d; + list-style: none; + margin: 0; + padding: 0; + background: #fff; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); + border-radius: .2em; + flex-direction: column-reverse; + display: none; + transition: .2s ease all; + min-width: 3em; + z-index: 99999; +} + +.action ul:before { + top: -16px; + left: 1em; + right: auto; + border: 8px solid transparent; + border-bottom-color: #ffffff; + content: ''; + position: absolute; +} + +.action ul a { + padding: .3em .5em; + border-bottom: 1px solid #f5f5f5; + transition: .2s ease all; + text-align: left; +} + +.action ul a:first-child { + border: 0; + border-bottom-right-radius: .2em; + border-bottom-left-radius: .2em; +} + +.action ul a:last-child { + border-top-right-radius: .2em; + border-top-left-radius: .2em; +} + +.action ul a:hover { + background-color: #f5f5f5; +} + + +/* * * * * * * * * * * * * * * * + * NEW FILE/DIR * + * * * * * * * * * * * * * * * */ + +.floating { + position: fixed; + bottom: 1em; + right: 1em; +} + +.floating .action { + background-color: #2196f3 !important; + color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); +} + +#newdir { + position: fixed; + bottom: 1.3em; + right: 5em; + transition: .2s ease all; + opacity: 0; + border: 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); + padding: .5em; + width: 22em; + border-radius: .2em; +} + +#newdir.enabled { + opacity: 1; +} + + +/* * * * * * * * * * * * * * * * + * HEADER * + * * * * * * * * * * * * * * * */ + +header { + z-index: 1000; + background-color: #fff; + border-bottom: 1px solid rgba(0, 0, 0, 0.075); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 0; +} + +header a, +header a:hover { + color: inherit; +} + +header p i { + font-size: 1em !important; + color: rgba(255, 255, 255, .31); +} + +header>div { + display: flex; + width: 100%; + padding: 0.5em 0.5em 0.5em 1em; +} + +header p { + display: inline-block; + margin: 0; + vertical-align: middle; +} + +header p a, +header p a:hover { + color: inherit; +} + +header .action span { + display: none; +} + +header>div div { + vertical-align: middle; + position: relative; +} + +header .actions { + margin-left: auto; +} + +#logout { + border-radius: 0; + margin-left: auto; + padding: .15em; +} + + +/* * * * * * * * * * * * * * * * + * TOP BAR * + * * * * * * * * * * * * * * * */ + +#top-bar { + height: 4em; +} + +#top-bar>div:nth-child(1) { + margin-right: 1em; + font-weight: 500; + font-size: 1.5em; + line-height: 2; +} + + +/* * * * * * * * * * * * * * * * + * SEARCH BAR * + * * * * * * * * * * * * * * * */ + +#search { + position: relative; + display: inline-block; + height: 100%; + padding: 0.75em; + vertical-align: middle; + border-radius: 0.3em; + background-color: #f5f5f5; + transition: .1s ease all; +} + +#search.active { + background-color: #fff; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); +} + +#search.active i, +#search.active input { + color: #212121; +} + +#search i, +#search input { + vertical-align: middle; +} + +#search i { + margin-right: 0.3em; + user-select: none; +} + +#search input { + min-width: 20em; + border: 0; + outline: 0; + background-color: transparent; +} + +#search.active div { + visibility: visible; + opacity: 1; + top: 100%; +} + +#search ul { + padding: 0; + margin: 0; + list-style: none; +} + +#search li { + margin-bottom: .5em; +} + +#search>div { + position: absolute; + top: 0; + width: 100%; + left: 0; + z-index: 999999; + background-color: #fff; + text-align: left; + color: #ccc; + box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .12); + padding: .5em; + border-bottom-left-radius: .3em; + border-bottom-right-radius: .3em; + transition: .1s ease all; + visibility: hidden; + opacity: 0; + overflow-x: hidden; + overflow-y: auto; + max-height: 50vh; +} + +#search>div div { + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; +} + +#search>div p { + width: 100%; + text-align: center; + display: none; + margin: 0; + max-width: none; +} + +#search.ongoing p { + display: block; +} + +#search.active div i, +#sidebar #search.active div i { + color: #ccc; + text-align: center; + margin: 0 auto; + display: table; +} + +#search::-webkit-input-placeholder { + color: rgba(255, 255, 255, .5); +} + +#search:-moz-placeholder { + opacity: 1; + color: rgba(255, 255, 255, .5); +} + +#search::-moz-placeholder { + opacity: 1; + color: rgba(255, 255, 255, .5); +} + +#search:-ms-input-placeholder { + color: rgba(255, 255, 255, .5); +} + + +/* * * * * * * * * * * * * * * * + * BOTTOM BAR * + * * * * * * * * * * * * * * * */ + +#bottom-bar { + background-color: #fafafa; + border-top: 1px solid rgba(0, 0, 0, 0.075); + border-bottom: 1px solid rgba(0, 0, 0, 0.075); + height: 3.8em; +} + +#bottom-bar div:first-child>* { + display: inline-block; + vertical-align: middle; +} + +#bottom-bar div:first-child>i { + margin-right: .3em; +} + +#file-only { + display: inline-block; + border-right: 1px solid rgba(0, 0, 0, 0.075); + padding-right: .3em; + margin-right: .3em; + transition: .2s ease all; + visibility: visible; +} + +#file-only.disabled { + opacity: 0; + visibility: hidden; +} + + +/* * * * * * * * * * * * * * * * + * BREADCRUMBS * + * * * * * * * * * * * * * * * */ + +#breadcrumbs-button { + padding: .4em 0.3em; + border-radius: .1em; + cursor: pointer; + transition: .1s ease all; +} + +#breadcrumbs-button.active, +#breadcrumbs-button:hover { + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + background: #fff; +} + +#current-file { + line-height: 2.7em; +} + +#breadcrumbs { + transition: .1s ease all; + padding: 0; + margin: 0; + list-style: none; + display: inline-flex; + flex-direction: column; + border-radius: 2px; + border-top-left-radius: 0; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + background: #fff; + position: absolute; + left: 0; + top: 2.3em; + min-width: 7em; + z-index: 999; + opacity: 0; + visibility: hidden; + color: #656565; +} + +#breadcrumbs.active { + opacity: 1; + visibility: visible; +} + +#breadcrumbs li { + line-height: 1.5em; + padding: .3em; +} + + +/* * * * * * * * * * * * * * * * + * LISTING * + * * * * * * * * * * * * * * * */ + +#listing { + max-width: calc(100% - 1.2em); + width: 100%; +} + +#listing h2 { + margin: 0 0 0 0.5em; + font-size: 1em; + color: rgba(0, 0, 0, 0.2); + font-weight: 500; +} + +#listing .item div:last-of-type * { + text-overflow: ellipsis; + overflow: hidden; +} + +#listing>div { + display: flex; + padding: 0; + flex-wrap: wrap; + justify-content: flex-start; + position: relative; +} + +#listing .item { + background-color: #fff; + position: relative; + display: flex; + flex-wrap: nowrap; + color: #6f6f6f; + transition: .1s ease all; + align-items: center; +} + +#listing .item div:last-of-type { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +#listing .item p { + margin: 0; +} + +#listing .item .size, +#listing .item .modified { + font-size: 0.9em; +} + +#listing .item .name { + font-weight: bold; +} + +#listing .item i { + font-size: 4em; + margin-right: 0.1em; + vertical-align: bottom; +} + + +/* * * * * * * * * * * * * * * * + * LISTING - MOSAIC * + * * * * * * * * * * * * * * * */ + +#listing.mosaic { + margin-top: 1em; +} + +#listing.mosaic .item { + width: calc(33% - 1em); + margin: .5em; + padding: 0.5em; + border-radius: 0.2em; + box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12); +} + +#listing.mosaic .item:hover { + box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important; +} + +#listing.mosaic .header { + display: none; +} + +#listing.mosaic .item div:first-of-type { + width: 5em; +} + +#listing.mosaic .item div:last-of-type { + width: calc(100% - 5vw); +} + + +/* * * * * * * * * * * * * * * * + * LISTING - DETAIL * + * * * * * * * * * * * * * * * */ + +#listing.list { + flex-direction: column; + margin-top: 3.25em; + width: 100%; + max-width: 100%; +} + +#listing.list .item { + width: 100%; + margin: 0; + border: 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 1em; +} + +#listing.list h2 { + display: none; +} + +#listing .item[aria-selected=true] { + background: #2196f3 !important; + color: #fff !important; +} + +#listing.list .item div:first-of-type { + width: 3em; +} + +#listing.list .item div:first-of-type i { + font-size: 2em; +} + +#listing.list .item div:last-of-type { + width: calc(100% - 3em); + display: flex; + align-items: center; +} + +#listing.list .item .name { + width: 50%; +} + +#listing.list .item .size { + width: 25%; +} + +#listing .item.header { + display: none !important; + background-color: #ccc; +} + +#listing.list .header i { + font-size: 1.5em; + vertical-align: middle; + margin-left: .2em; +} + +#listing.list .item.header { + display: flex !important; + background: #fafafa; + position: fixed; + width: 100%; + top: 7.8em; + left: 0; + z-index: 999; + padding: .85em; +} + +#listing.list .item.header>div:first-child { + width: 0; +} + +#listing.list .item.header .name { + margin-right: 3em; +} + +#listing.list .header { + display: flex; + background: #fafafa; + position: fixed; + width: 100%; + top: 7.8em; + left: 0; + z-index: 999; +} + +#listing.list .header a { + color: inherit; +} + +#listing.list .item.header>div:first-child { + width: 0; +} + +#listing.list .name { + font-weight: normal; +} + +#listing.list .item.header .name { + margin-right: 3em; +} + +#listing.list .header span { + vertical-align: middle; +} + +#listing.list .header i { + opacity: 0; + transition: .1s ease all; +} + +#listing.list .header p:hover i, +#listing.list .header .active i { + opacity: 1; +} + +#listing.list .item.header .active { + font-weight: bold; +} + + +/* * * * * * * * * * * * * * * * + * FOOTER * + * * * * * * * * * * * * * * * */ + +footer { + font-size: 0.6em; + margin: 2em 0 2em; + text-align: center; + color: grey; +} + +footer a, +footer a:hover { + color: inherit; +} + + +/* * * * * * * * * * * * * * * * + * ANIMATIONS * + * * * * * * * * * * * * * * * */ + +@keyframes spin { + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } } \ No newline at end of file diff --git a/_embed/public/js/listing.js b/_embed/public/js/listing.js index 6b62d883..97aba293 100644 --- a/_embed/public/js/listing.js +++ b/_embed/public/js/listing.js @@ -32,7 +32,7 @@ var renameEvent = function(event) { let item = document.getElementById(selectedItems[0]), link = item.dataset.url, - span = item.getElementsByTagName('span')[0], + span = item.querySelector('.name'), name = span.innerHTML; span.setAttribute('contenteditable', 'true'); @@ -130,37 +130,6 @@ function unselectAll() { return false; } -// Toggles the view mode -var viewEvent = function(event) { - let cookie = document.getCookie('view-list'), - listing = document.getElementById('listing'); - - if (cookie != 'true') { - document.cookie = 'view-list=true'; - } else { - document.cookie = 'view-list=false'; - } - - handleViewType(document.getCookie('view-list')); - return false; -} - -// Handles the view mode change -var handleViewType = function(viewList) { - let listing = document.getElementById('listing'), - button = document.getElementById('view'); - - if (viewList == "true") { - listing.classList.add('list'); - button.innerHTML = 'view_module Switch view'; - return false; - } - - button.innerHTML = 'view_list Switch view'; - listing.classList.remove('list'); - return false; -} - // Handles the new directory event var newDirEvent = function(event) { // TODO: create new dir button and new file button @@ -239,13 +208,9 @@ var redefineDownloadURLs = function() { document.addEventListener('DOMContentLoaded', event => { - // Handles the current view mode and adds the event to the button - handleViewType(document.getCookie("view-list")); - document.getElementById("view").addEventListener("click", viewEvent); - let updateColumns = () => { let columns = Math.floor(document.getElementById('listing').offsetWidth / 300), - itens = getCSSRule('#listing .item'); + itens = getCSSRule('#listing.mosaic .item'); itens.style.width = `calc(${100/columns}% - 1em)`; } diff --git a/_embed/templates/base.tmpl b/_embed/templates/base.tmpl index e388e07d..831fd7f0 100644 --- a/_embed/templates/base.tmpl +++ b/_embed/templates/base.tmpl @@ -6,10 +6,12 @@ + + - {{ if ne .User.StyleSheet "" }} + {{- if ne .User.StyleSheet "" -}} - {{ end }} + {{- end -}} @@ -19,18 +21,18 @@ baseURL = "{{.Config.AbsoluteURL}}"; - {{ if .IsDir }} + {{- if .IsDir }} - {{ else }} + {{- else }} - {{ end }} + {{- end }}
-
+

File Manager

- exit_to_app Logout + exit_to_app
-
+
{{ if ne .Name "/"}} @@ -66,7 +68,7 @@
- open_in_new See raw + open_in_new
{{ if and .IsDir .User.AllowEdit }}
@@ -103,7 +105,11 @@ {{ if .IsDir }}
- view_headline Switch view + {{ if eq .Display "mosaic" }} + view_list + {{ else }} + view_module + {{ end }}
{{ end }}
diff --git a/_embed/templates/listing.tmpl b/_embed/templates/listing.tmpl index da70e678..6874ed00 100644 --- a/_embed/templates/listing.tmpl +++ b/_embed/templates/listing.tmpl @@ -1,41 +1,59 @@ {{ define "content" }} -{{ with .Data }} -
-
-
-
-
- -
-
- Name -

Size

-

Modified time

-
+
+{{- with .Data -}} +
+
+
+
+

Name + {{- if eq .Sort "name" -}} + {{- if eq .Order "asc" -}} + arrow_downward + {{- else -}} + arrow_upward + {{- end -}} + {{- else -}} + arrow_downward + {{- end -}} +

+

File Size + {{- if eq .Sort "size" -}} + {{- if eq .Order "asc" -}} + arrow_downward + {{- else -}} + arrow_upward + {{- end -}} + {{- else -}} + arrow_downward + {{- end -}} +

+

Last modified

-

Folders

-
- {{- range .Items}} - {{ if and (.UserAllowed) (.IsDir) }} - {{ template "item" .}} - {{ end }} - {{- end}} -
-

Files

-
- {{- range .Items}} - {{ if and (.UserAllowed) (not .IsDir) }} - {{ template "item" .}} - {{ end }} - {{- end}} -
+
+ +

Folders

+
+ {{- range .Items }} + {{- if and (.UserAllowed) (.IsDir) }} + {{ template "item" .}} + {{- end }} + {{- end }} +
+ +

Files

+
+ {{- range .Items }} + {{- if and (.UserAllowed) (not .IsDir) }} + {{ template "item" .}} + {{- end }} + {{- end }}
-{{ end }} -{{ end }} +{{- end -}} +{{- end -}} {{ define "item" }}
- {{.Name}} +

{{.Name}}

{{- if .IsDir}} -

—

+

—

{{- else}} -

{{.HumanSize}}

+

{{.HumanSize}}

{{- end}} -

+

diff --git a/handlers/listing.go b/handlers/listing.go index 9d49baa6..60cd5e59 100644 --- a/handlers/listing.go +++ b/handlers/listing.go @@ -57,15 +57,35 @@ func ServeListing(w http.ResponseWriter, r *http.Request, c *config.Config, u *c return http.StatusOK, nil } + displayMode := r.URL.Query().Get("display") + + if displayMode == "" { + if displayCookie, err := r.Cookie("display"); err == nil { + displayMode = displayCookie.Value + } + } + + if displayMode == "" || (displayMode != "mosaic" && displayMode != "list") { + displayMode = "mosaic" + } + + http.SetCookie(w, &http.Cookie{ + Name: "display", + Value: displayMode, + Path: c.BaseURL, + Secure: r.TLS != nil, + }) + page := &page.Page{ Minimal: r.Header.Get("Minimal") == "true", Info: &page.Info{ - Name: listing.Name, - Path: i.VirtualPath, - IsDir: true, - User: u, - Config: c, - Data: listing, + Name: listing.Name, + Path: i.VirtualPath, + IsDir: true, + User: u, + Config: c, + Display: displayMode, + Data: listing, }, } diff --git a/page/page.go b/page/page.go index 3999defe..a3e75770 100644 --- a/page/page.go +++ b/page/page.go @@ -23,13 +23,14 @@ type Page struct { // Info contains the information of a Page type Info struct { - Name string - Path string - IsDir bool - User *config.User - Config *config.Config - Data interface{} - Token string + Name string + Path string + IsDir bool + User *config.User + Config *config.Config + Data interface{} + Display string + Token string } // BreadcrumbMapItem ...