style: sorting ui

ubiquity · Dec 4, 2023 · 759ec00 · 759ec00
1 parent dbea8f0
commit 759ec00
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 24 deletions.
diff --git a/static/index.html b/static/index.html
@@ -9,22 +9,21 @@
     <link rel="stylesheet" href="style/inverted-style.css" />
   </head>
   <body>
-    <div id="filters">
-      <div class="labels">
-        <input type="radio" id="price" name="filter" value="price" /><label for="price">Price</label>
-        <input type="radio" id="time" name="filter" value="time" /><label for="time">Time</label>
-        <input type="radio" id="priority" name="filter" value="priority" /><label for="priority">Priority</label>
-      </div>
-    </div>
     <div id="issues-container"></div>
     <div id="toolbar" data-authenticated="false"
       ><div id="branding"
         ><svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
           <path
             d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
           ></path></svg
-        ><span><span class="full">Ubiquity DAO | </span><span>DevPool Directory</span></span></div
-      ></div
+        ><span><span class="full">Ubiquity DAO | </span><span class="full">DevPool Directory</span></span></div
+      ><div id="filters">
+        <div class="labels">
+          <input type="radio" id="price" name="filter" value="price" /><label for="price">Price</label>
+          <input type="radio" id="time" name="filter" value="time" /><label for="time">Time</label>
+          <input type="radio" id="priority" name="filter" value="priority" /><label for="priority">Priority</label>
+        </div>
+      </div></div
     >
     <script type="module" src="dist/src/home/home.js"></script>
   </body>

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -50,8 +50,8 @@
     /* border-left: 1px solid #7f7f7f10; */
     padding: 0 0 48px;
     /* background: linear-gradient(to bottom, #7f7f7f00 0%, #7f7f7fff 15%, #7f7f7fff 85%, #7f7f7f00 100%); */
-    -webkit-mask-image: linear-gradient(to bottom, #ffffff00, #ffffffff 48px, #ffffffff 75%, #ffffff00 100%);
-    height: calc(100vh - 96px);
+    /* -webkit-mask-image: linear-gradient(to bottom, #ffffff00, #ffffffff 48px, #ffffffff 75%, #ffffff00 100%); */
+    /* height: calc(100vh - 96px); */
     overflow: scroll;
     scrollbar-width: none; /* For Firefox */
     -ms-overflow-style: none; /* For Internet Explorer and Edge */
@@ -187,7 +187,7 @@
     /* margin: 0; */
   }
   #filters {
-    padding: 4px 6px;
+    /* padding: 4px; */
   }
   #filters label {
     cursor: pointer;
@@ -207,6 +207,8 @@
     display: flex;
     /* justify-content: center; */
     margin-left: auto;
+    /* max-width: 640px; */
+    /* margin: 0 auto; */
   }
 
   .partner {
@@ -282,7 +284,7 @@
 
   #toolbar {
     position: fixed;
-    width: 100vw;
+    width: calc(100vw - 8px);
     height: 48px;
     /* background: red; */
     bottom: 0;
@@ -300,6 +302,7 @@
     /* align-items: flex-end; This will align the items to the bottom of the container */
     /* width: 100%; */
     /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */
+    /* justify-content: end; */
   }
   #toolbar > * {
     /* justify-content: center; */
@@ -373,24 +376,40 @@
     background-color: #00ffff; /* Example background color */
   }
 
-  @media screen and (max-width: 640px) {
+  @media screen and (max-width: 896px) {
     .full {
       display: none !important;
     }
     .issue-element-inner {
       display: block;
     }
-    .labels {
+    #issues-container .labels {
       margin-left: 48px;
       margin-top: 4px;
     }
+    #branding {
+      margin: auto;
+      margin-left: 12px;
+    }
+    #branding > span {
+      padding: 0;
+    }
+    #toolbar > * {
+      margin: auto;
+    }
+    #toolbar > button{
+      /* margin: 16px auto; */
+      padding: 12px 16px;
+    }
   }
 
   #toolbar > button {
     text-align: center;
   }
   #filters > div {
-    text-align: right;
+    /* text-align: center; */
+    /* margin: 0 auto; */
+    /* max-width: 640px; */
   }
   #filters button {
     margin-top: 8px;

diff --git a/static/style/special.css b/static/style/special.css
@@ -2,9 +2,15 @@
   html {
     background-color: #06061aff;
   }
+  #toolbar.ready{
+    background-color: #06061a80
+  }
 }
 @media (prefers-color-scheme: light) {
   html {
     background-color: #f0f0f0;
   }
+  #toolbar.ready{
+    background-color: #f0f0f080;
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -50,8 +50,8 @@
     /* border-left: 1px solid #80808010; */
     padding: 0 0 48px;
     /* background: linear-gradient(to bottom, #80808000 0%, #808080ff 15%, #808080ff 85%, #80808000 100%); */
-    -webkit-mask-image: linear-gradient(to bottom, #00000000, #000000ff 48px, #000000ff 75%, #00000000 100%);
-    height: calc(100vh - 96px);
+    /* -webkit-mask-image: linear-gradient(to bottom, #00000000, #000000ff 48px, #000000ff 75%, #00000000 100%); */
+    /* height: calc(100vh - 96px); */
     overflow: scroll;
     scrollbar-width: none; /* For Firefox */
     -ms-overflow-style: none; /* For Internet Explorer and Edge */
@@ -187,7 +187,7 @@
     /* margin: 0; */
   }
   #filters {
-    padding: 4px;
+    /* padding: 4px; */
   }
   #filters label {
     cursor: pointer;
@@ -284,7 +284,7 @@
 
   #toolbar {
     position: fixed;
-    width: 100vw;
+    width: calc(100vw - 8px);
     height: 48px;
     /* background: red; */
     bottom: 0;
@@ -302,6 +302,7 @@
     /* align-items: flex-end; This will align the items to the bottom of the container */
     /* width: 100%; */
     /* padding: 0 16.66%; Adding padding to the container so that items align approximately at 33% and 66% */
+    /* justify-content: end; */
   }
   #toolbar > * {
     /* justify-content: center; */
@@ -375,26 +376,40 @@
     background-color: #00ffff; /* Example background color */
   }
 
-  @media screen and (max-width: 640px) {
+  @media screen and (max-width: 896px) {
     .full {
       display: none !important;
     }
     .issue-element-inner {
       display: block;
     }
-    .labels {
+    #issues-container .labels {
       margin-left: 48px;
       margin-top: 4px;
     }
+    #branding {
+      margin: auto;
+      margin-left: 12px;
+    }
+    #branding > span {
+      padding: 0;
+    }
+    #toolbar > * {
+      margin: auto;
+    }
+    #toolbar > button{
+      /* margin: 16px auto; */
+      padding: 12px 16px;
+    }
   }
 
   #toolbar > button {
     text-align: center;
   }
   #filters > div {
     /* text-align: center; */
-    margin: 0 auto;
-    max-width: 640px;
+    /* margin: 0 auto; */
+    /* max-width: 640px; */
   }
   #filters button {
     margin-top: 8px;