Sfoglia il codice sorgente

Improve dynamic resizing of search and photo rail

Zed 7 anni fa
parent
commit
7d655c3dd5

+ 1 - 0
src/sass/inputs.scss

@@ -25,6 +25,7 @@ input[type="text"] {
 .icon-button button {
     color: $accent;
     text-decoration: none;
+    background: none;
     border: none;
     float: none;
     padding: unset;

+ 20 - 0
src/sass/profile/photo-rail.scss

@@ -74,3 +74,23 @@
         transition: max-height 0.4s;
     }
 }
+
+@media(max-width: 600px) {
+    .photo-rail-grid {
+        grid-template-columns: repeat(6, 1fr);
+    }
+
+    #photo-rail-grid-toggle:checked ~ .photo-rail-grid {
+        max-height: 300px;
+    }
+}
+
+@media(max-width: 450px) {
+    .photo-rail-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    #photo-rail-grid-toggle:checked ~ .photo-rail-grid {
+        max-height: 450px;
+    }
+}

+ 10 - 0
src/sass/search.scss

@@ -42,6 +42,7 @@
 }
 
 .search-panel {
+    width: 100%;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s;
@@ -78,6 +79,15 @@
     grid-column-gap: 10px;
 }
 
+.profile-tabs {
+    @include search-resize(785px, 5, 185px);
+    @include search-resize(725px, 4, 185px);
+    @include search-resize(600px, 6, 140px);
+    @include search-resize(530px, 5, 185px);
+    @include search-resize(475px, 4, 185px);
+    @include search-resize(406px, 3, 250px);
+}
+
 @include search-resize(530px, 5, 185px);
 @include search-resize(475px, 4, 185px);
 @include search-resize(406px, 3, 250px);

+ 1 - 0
src/sass/tweet/card.scss

@@ -32,6 +32,7 @@
 
 .card-title {
     @include ellipsis;
+    white-space: unset;
     font-weight: bold;
     font-size: 1.15em;
 }