Updates on front end :D

Former-commit-id: 032b13b1f3a6216ae6bafde75f583038916b4f74 [formerly 80588a95ad5168ecab65e3d8cc8968bad9a20a6b] [formerly 94b306854bac60361ddf1b945a3edec7204d1327 [formerly 193adea6bb8a5cdc0d4e072b2c59fc0e82f69548]] Former-commit-id: 67b5219c1a6488c1a797bec42a0dec2036441a48 [formerly 28183c674806c3125a285a48905a01e1e835be7e] Former-commit-id: d2169aab351eab252ea34e07bb943411aa8e9cb4
2017-06-29 09:11:46 +01:00
parent 3eb9505ec4
commit a7b50c2de1
19 changed files with 449 additions and 343 deletions
--- a/_assets/src/css/listing.css
+++ b/_assets/src/css/listing.css
@@ -0,0 +1,243 @@
+
+
+/* * * * * * * * * * * * * * * *
+ *            LISTING          *
+ * * * * * * * * * * * * * * * */
+
+#listing {
+    max-width: calc(100% - 1.2em);
+    width: 100%;
+}
+
+#listing h2 {
+    margin: 0 0 0 0.5em;
+    font-size: .9em;
+    color: rgba(0, 0, 0, 0.38);
+    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;
+    cursor: pointer;
+}
+
+#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 h2.message,
+.message {
+    text-align: center;
+    font-size: 3em;
+    margin: 1em auto;
+    display: block !important;
+    width: 95%;
+    color: rgba(0, 0, 0, 0.3);
+    font-weight: 500;
+}
+
+.message i {
+    font-size: inherit;
+    vertical-align: middle;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *        LISTING - MOSAIC     *
+ * * * * * * * * * * * * * * * */
+
+#listing.mosaic {
+    padding-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;
+    padding-top: 3.25em;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+}
+
+#listing.list .item {
+    width: 100%;
+    margin: 0;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 1em;
+    border-top: 0;
+}
+
+#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: #f8f8f8;
+    position: fixed;
+    width: 78%;
+    top: 4em;
+    left: 20%;
+    z-index: 999;
+    padding: .85em;
+    border: 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#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;
+}