style: mobile improvement

ubiquity · Dec 2, 2023 · fe051fa · fe051fa
1 parent b0b7984
commit fe051fa
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 34 deletions.
diff --git a/src/home/home-controller.ts b/src/home/home-controller.ts
@@ -56,11 +56,9 @@ export function homeController(container: HTMLDivElement, issues: GitHubIssue[])
       });
 
       issueElement.innerHTML = `
-      <div class="info"><div class="labels">${labels.join(
+      <div class="info"><div class="title"><h3>${issue.title}</h3></div><div class="partner"><p class="organization-name">${organizationName}</p><p class="repository-name">${repositoryName}</p></div></div><div class="labels">${labels.join(
         ""
-      )}</div><div class="partner"><p class="organization-name">${organizationName}</p><p class="repository-name">${repositoryName}</p></div></div>
-      <div class="title"><h3>${issue.title}</h3></div>
-      `;
+      )}</div>`;
 
       issueElement.addEventListener("click", () => {
         console.log(issue);

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -80,8 +80,8 @@
   #issues-container > div {
     padding: 0 16px;
     overflow: hidden;
-    background-size: 20px;
-    background-position: 12px calc(100% - 9px);
+    background-size: 56px;
+    background-position: 0;
     background-repeat: no-repeat;
     opacity: 0.25;
     margin: 3px auto;
@@ -118,10 +118,11 @@
   }
 
   h3 {
-    margin: 0 0 0 12px;
+    /* margin: 0 0 0 12px; */
     line-height: 1;
     font-size: 16px;
     text-overflow: ellipsis;
+    margin: 0;
   }
 
   p {
@@ -155,7 +156,7 @@
     margin-left: 0;
   }
   .labels > .label {
-    display: inline-block;
+    /* display: inline-block; */
     padding: 4px 6px;
     border-radius: 4px;
     margin: 0px 4px 0px;
@@ -166,17 +167,25 @@
     width: 64px;
     letter-spacing: 0.5px;
     flex-grow: 3;
+    display: flex;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    height: 16px;
   }
   .labels {
-    text-align: right;
-    display: inline-block;
+    /* text-align: right; */
+    /* display: inline-block; */
     display: flex;
+    /* justify-content: center; */
+    margin-left: auto;
   }
 
   .partner {
     bottom: 0;
-    text-align: right;
-    margin: 4px 4px 0;
+    /* text-align: right; */
+    /* margin: 4px 4px 0; */
+    margin: 0;
   }
 
   body {
@@ -185,11 +194,14 @@
   .info {
     opacity: 0.66;
     transition: 0.125s opacity ease-in-out;
+    /* display: flex; */
+    align-items: center;
+    margin: 0 0 0 48px;
   }
 
   .title {
-    display: flex;
-    align-items: center;
+    /* display: flex; */
+    /* align-items: center; */
   }
 
   .label.pricing {
@@ -199,7 +211,7 @@
     opacity: 0.5;
     /* margin-left: 100vw; */
     transition: 0.33s all cubic-bezier(0, 1, 1, 1);
-    filter: blur(4px);
+    filter: blur(8px);
   }
 
   button {
@@ -316,11 +328,18 @@
   }
 
   .full {
-    display: none !important;
+    display: unset !important;
   }
-  @media screen and (min-width: 640px) {
+  @media screen and (max-width: 640px) {
     .full {
-      display: unset !important;
+      display: none !important;
+    }
+    .issue-element-inner {
+      display: block;
+    }
+    .labels{
+      margin-left: 48px;
+      margin-top: 4px;
     }
   }
 

diff --git a/static/style/special.css b/static/style/special.css
@@ -5,6 +5,6 @@
 }
 @media (prefers-color-scheme: light) {
   html {
-    background-color: #f0f0f0;
+    background-color: #f8f8f8;
   }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -46,7 +46,7 @@
     max-width: 640px;
     margin: auto;
     /* border-left: 1px solid #80808010; */
-    padding: 48px 0;
+    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 0%, #000000ff 75%, #00000000 100%);
     height: calc(100vh - 96px);
@@ -80,8 +80,8 @@
   #issues-container > div {
     padding: 0 16px;
     overflow: hidden;
-    background-size: 20px;
-    background-position: 12px calc(100% - 9px);
+    background-size: 56px;
+    background-position: 0;
     background-repeat: no-repeat;
     opacity: 0.25;
     margin: 3px auto;
@@ -118,10 +118,11 @@
   }
 
   h3 {
-    margin: 0 0 0 12px;
+    /* margin: 0 0 0 12px; */
     line-height: 1;
     font-size: 16px;
     text-overflow: ellipsis;
+    margin: 0;
   }
 
   p {
@@ -155,7 +156,7 @@
     margin-left: 0;
   }
   .labels > .label {
-    display: inline-block;
+    /* display: inline-block; */
     padding: 4px 6px;
     border-radius: 4px;
     margin: 0px 4px 0px;
@@ -166,17 +167,25 @@
     width: 64px;
     letter-spacing: 0.5px;
     flex-grow: 3;
+    display: flex;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    height: 16px;
   }
   .labels {
-    text-align: right;
-    display: inline-block;
+    /* text-align: right; */
+    /* display: inline-block; */
     display: flex;
+    /* justify-content: center; */
+    margin-left: auto;
   }
 
   .partner {
     bottom: 0;
-    text-align: right;
-    margin: 4px 4px 0;
+    /* text-align: right; */
+    /* margin: 4px 4px 0; */
+    margin: 0;
   }
 
   body {
@@ -185,11 +194,14 @@
   .info {
     opacity: 0.66;
     transition: 0.125s opacity ease-in-out;
+    /* display: flex; */
+    align-items: center;
+    margin: 0 0 0 50px;
   }
 
   .title {
-    display: flex;
-    align-items: center;
+    /* display: flex; */
+    /* align-items: center; */
   }
 
   .label.pricing {
@@ -199,7 +211,7 @@
     opacity: 0.5;
     /* margin-left: 100vw; */
     transition: 0.33s all cubic-bezier(0, 1, 1, 1);
-    filter: blur(4px);
+    filter: blur(8px);
   }
 
   button {
@@ -316,11 +328,18 @@
   }
 
   .full {
-    display: none !important;
+    display: unset !important;
   }
-  @media screen and (min-width: 640px) {
+  @media screen and (max-width: 640px) {
     .full {
-      display: unset !important;
+      display: none !important;
+    }
+    .issue-element-inner {
+      display: block;
+    }
+    .labels{
+      margin-left: 48px;
+      margin-top: 4px;
     }
   }