Fix layout issues in the backend

aelassas · May 19, 2024 · 719816f · 719816f
1 parent 0fb2750
commit 719816f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 27 deletions.
diff --git a/backend/src/assets/css/agencies.css b/backend/src/assets/css/agencies.css
@@ -51,6 +51,7 @@ div.agencies .info-box {
     padding: 1px;
     display: flex;
     justify-content: center;
+    flex-direction: column;
   }
 }
 

diff --git a/backend/src/assets/css/agency-list.css b/backend/src/assets/css/agency-list.css
@@ -1,5 +1,5 @@
 section.agency-list {
-  padding-top: 10px;
+  padding-top: 8px;
   margin: 0 10px;
   display: flex;
   flex-direction: column;
@@ -14,7 +14,9 @@ section.agency-list .empty-list {
 }
 
 section.agency-list article {
-  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 5px;
@@ -23,19 +25,17 @@ section.agency-list article {
   padding: 25px;
   margin-bottom: 15px;
   height: 85px;
+  width: 100%;
 }
 
 section.agency-list article .agency-item {
-  position: absolute;
-  left: 15px;
-  top: 25px;
+  display: flex;
+  flex-direction: row;
+  width: calc(100% - 120px);
 }
 
 section.agency-list article .agency-item .agency-item-avatar {
-  float: left;
-  display: inline;
-  margin-top: 3px;
-  color: #333;
+  flex: none;
   width: 60px;
   height: 34px;
 }
@@ -46,20 +46,17 @@ section.agency-list article .agency-item .agency-item-avatar img {
 }
 
 section.agency-list article .agency-item .agency-item-title {
-  display: inline;
+  display: inline-block;
   font-size: 1.7em;
-  margin-left: 20px;
-  text-size-adjust: none;
-  line-height: 1.3em;
-  text-decoration: none;
+  margin-left: 10px;
   color: #333;
-  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 section.agency-list article .agency-actions {
-  position: absolute;
-  right: 10px;
-  width: 160px;
+  min-width: 120px;
 }
 
 section.agency-list article .agency-actions a,
@@ -69,7 +66,7 @@ section.agency-list article .agency-actions button {
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   section.agency-list article {
     width: 600px;
   }

diff --git a/backend/src/assets/css/location-list.css b/backend/src/assets/css/location-list.css
@@ -1,8 +1,6 @@
 section.location-list {
-  padding-top: 10px;
   margin: 0 10px;
-  width: 100%;
-  max-width: 480px;
+  max-width: 500px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -15,6 +13,12 @@ section.location-list .empty-list {
   width: 250px;
 }
 
+@media only screen and (width <=960px) {
+  section.location-list .location-list-items {
+    width: 100%;
+  }
+}
+
 section.location-list .location-list-item {
   position: relative;
   background: #fff;
@@ -28,13 +32,16 @@ section.location-list .location-list-item {
 }
 
 section.location-list .location-title {
-  margin-right: 10px;
+  margin-right: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Device width is greater than or equal to 960px */
 
 @media only screen and (width >=960px) {
   section.location-list .location-list-item {
-    width: 500px;
+    width: 480px;
   }
 }
diff --git a/backend/src/assets/css/locations.css b/backend/src/assets/css/locations.css
@@ -47,10 +47,11 @@ div.locations .info-box {
   }
 
   div.locations div.col-2 {
-    margin-top: 3px;
-    padding: 1px;
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    margin-top: 3px;
+    padding: 1px;
   }
 }
 

diff --git a/backend/src/components/LocationList.tsx b/backend/src/components/LocationList.tsx
@@ -210,7 +210,7 @@ const LocationList = ({
             </Card>
           )
         ) : (
-          <List>
+          <List className="location-list-items">
             {rows.map((location, index) => (
               <ListItem
                 className="location-list-item"