feat(css): improve responsive design for bars

userstyles-world · May 21, 2021 · c496da7 · c496da7
1 parent 8067200
commit c496da7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/scss/ui/_base.scss b/scss/ui/_base.scss
@@ -170,3 +170,16 @@ label[for="remember"] {
 }
 
 #share { min-width: 300px }
+
+@media screen and (max-width: 1180px) {
+    .header {
+        flex-flow: row wrap;
+        > .share { width: 100% }
+        > .actions {
+            order: -1;
+            margin: 0 0 1rem;
+            flex-flow: row wrap;
+            .btn { margin-bottom: 0.5rem }
+        }
+    }
+}
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
@@ -120,16 +120,6 @@
     }
 }
 
-// TODO: Figure out how to deal with responsive design.
-.preview + section .header {
-    @media screen and (max-width: 640px) {
-        flex-wrap: wrap;
-        h1 { width: 100%; text-align: center }
-        *:nth-child(2) { margin-left: auto !important }
-        *:last-of-type { margin-right: auto }
-    }
-}
-
 .grid {
     @media screen and (max-width: 1280px) {
         .col { flex-basis: calc(100% / 3 - 1rem) }

diff --git a/scss/ui/_footer.scss b/scss/ui/_footer.scss
@@ -2,6 +2,10 @@ footer {
     border-top: 1px solid var(--bg-4);
     background-color: var(--bg-2);
 
+    ul {
+        flex-flow: row wrap;
+    }
+
     li {
         list-style: none;
         &:not(:last-child)::after {

diff --git a/static/css/main.css b/static/css/main.css
diff --git a/views/style.html b/views/style.html
@@ -27,7 +27,7 @@ <h1 class="mb:m">{{ .Style.Name -}}
                 <section class="mt:l">
                     <div class="header flex mb:m ai:c">
                         {{ if .Slug }}
-                            <div class="share flex ai:c">
+                            <div class="share flex ai:c mr:m">
                                 <span class="mr:s">Share style</span>
                                 <input
                                     id="share"
@@ -46,16 +46,16 @@ <h1 class="mb:m">{{ .Style.Name -}}
                         <span class="actions flex ml:a">
                             {{ if eq .User.ID .Style.UserID }}
                                 <form class="unset" method="post" action="/style/{{ .Style.ID }}">
-                                    <button class="btn" type="submit">Delete</button>
+                                    <button class="btn mr:s" type="submit">Delete</button>
                                 </form>
                                 <a
                                     href="/edit/{{ .Style.ID }}"
-                                    class="btn ml:s"
+                                    class="btn mr:s"
                                 >Edit</a>
                             {{ end }}
                             {{ if ge .User.Role 1 }}
                                 <form class="unset" method="post" action="/style/{{ .Style.ID }}/promote">
-                                    <button class="btn ml:s" type="submit"
+                                    <button class="btn mr:s" type="submit"
                                     tooltip-data='Promote this style. The style will then be featured on the home page. If this style has already been promoted it will be removed as being promoted.'
                                     >
                                     🌟</button>
@@ -66,20 +66,20 @@ <h1 class="mb:m">{{ .Style.Name -}}
                                     target="_blank"
                                     rel="noopener"
                                     href="{{ .Style.Homepage }}"
-                                    class="btn ml:s"
+                                    class="btn mr:s"
                                 >Project homepage</a>
                             {{ end }}
                             <a
                                 target="_blank"
                                 rel="noopener"
                                 href="/api/style/{{ .Style.ID }}.user.css"
-                                id="install" class="btn primary ml:s"
+                                id="install" class="btn primary mr:s"
                             >Install userstyle</a>
                             <a
                                 target="_blank"
                                 rel="noopener"
                                 href="https://github.com/openstyles/stylus/#readme"
-                                id="stylus" class="btn stylus ml:s"
+                                id="stylus" class="btn stylus"
                             >Get Stylus</a>
                         </span>
                     </div>