Make the listing responsive

flora-pm · Dec 26, 2024 · 4b16976 · 4b16976
1 parent 3830858
commit 4b16976
Showing 6 changed files with 107 additions and 68 deletions.
diff --git a/assets/css/2-components/11-advisory-list-item.css b/assets/css/2-components/11-advisory-list-item.css
@@ -1,74 +1,101 @@
 .package-advisory-list-item {
-  display: table-row;
-  font-size: 1.10rem;
-  line-height: 2rem;
+	display: grid;
+	grid-template-column: 1fr 1fr 1fr 1fr;
+	align-items: center;
+	padding: 1rem;
 }
 
-.package-advisory-list-item__hsec-id {
-  display: table-cell;
+.package-advisory-list-item__inline-published {
+	margin-left: 1rem;
+	display: inline;
 }
 
-.package-advisory-list-item__summary {
-  display: table-cell;
-  font-weight: bolder;
+.package-advisory-list-item__hsec_id {
+	order: 1;
 }
 
 .package-advisory-list-item__published {
-  display: table-cell;
+	order: 2;
+	display: none;
 }
 
 .package-advisory-list-item__attributes {
-  display: table-cell;
-	font-size: 0.90em;
-
-  .advisory-list-item__severity-none {
-    background-color: var(--severity-none);
-    border-radius: 0.5rem;
-    color: var(--severity-rating-colour);
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .advisory-list-item__severity-low {
-    background-color: var(--severity-low);
-    border-radius: 0.5rem;
-    color: var(--severity-rating-colour);
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .advisory-list-item__severity-medium {
-    background-color: var(--severity-medium);
-    border-radius: 0.5rem;
-    color: var(--severity-rating-colour);
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .advisory-list-item__severity-high {
-    background-color: var(--severity-high);
-    border-radius: 0.5rem;
-    color: var(--severity-rating-colour);
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-  .advisory-list-item__severity-critical {
-    background-color: var(--severity-critical);
-    border-radius: 0.5rem;
-    color: var(--severity-rating-colour);
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-
-	.advisory-list-item__fix-available {
-    background-color: var(--pale-green);
-    border-radius: 0.5rem;
-    color: var(--severity-rating-colour);
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-		margin-left: 0.5rem;
+	order: 3;
+}
+
+.package-advisory-list-item__summary {
+	font-weight: bolder;
+	order: 4;
+}
+
+.advisory-list-item__severity-pill {
+	border-radius: 0.5rem;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+}
+
+.advisory-list-item__severity-none {
+	background-color: var(--severity-none);
+	color: var(--severity-rating-colour);
+}
+
+.advisory-list-item__severity-low {
+	background-color: var(--severity-low);
+	color: var(--severity-rating-colour);
+	adding-right: 0.5rem;
+}
+
+.advisory-list-item__severity-medium {
+	background-color: var(--severity-medium);
+	color: var(--severity-rating-colour);
+}
+
+.advisory-list-item__severity-high {
+	background-color: var(--severity-high);
+	color: var(--severity-rating-colour);
+}
+
+.advisory-list-item__severity-critical {
+	background-color: var(--severity-critical);
+	color: var(--severity-rating-colour);
+}
+
+.advisory-list-item__fix-available {
+	background-color: var(--pale-green);
+	color: var(--severity-rating-colour);
+	margin-left: 0.5rem;
+
+}
+
+@media only screen and (--viewport-md) {
+	.package-advisory-list-item {
+		display: table-row;
+		font-size: 1.10rem;
+		line-height: 2rem;
+	}
+
+	.package-advisory-list-item__hsec-id {
+		order: initial;
+		display: table-cell;
+
+		.package-advisory-list-item__inline-published {
+			display: none;
+		}
+	}
 
+	.package-advisory-list-item__summary {
+		order: initial;
+		display: table-cell;
 	}
 
+	.package-advisory-list-item__published {
+		order: initial;
+		display: table-cell;
+	}
+
+	.package-advisory-list-item__attributes {
+		order: initial;
+		display: table-cell;
+		font-size: 0.90em;
+	}
 }
diff --git a/assets/css/2-components/12-headline.css b/assets/css/2-components/12-headline.css
@@ -0,0 +1,4 @@
+/* stylelint-disable declaration-block-no-redundant-longhand-properties, selector-class-pattern */
+.headline {
+	word-break: keep-all;
+}
diff --git a/assets/css/3-screens/1-package/5-security.css b/assets/css/3-screens/1-package/5-security.css
@@ -8,13 +8,17 @@
 	display: table-header-group;
 	border-inline: solid;
 	font-size: 1.25rem;
-
 }
 
 .advisory-list__body {
 	display: table-row-group;
 }
 
+@media only screen and (--viewport-md) {
+	.advisory-list__header {
+		display: table-cell;
+	}
+}
 .advisory-list__header {
-	display: table-cell;
+		display: none;
 }
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -18,6 +18,7 @@
 @import "2-components/9-terminal-icon.css";
 @import "2-components/10-error.css";
 @import "2-components/11-advisory-list-item.css";
+@import "2-components/12-headline.css";
 
 /* Screens/Pages specific style */
 @import "3-screens/1-package/1-package.css";

diff --git a/src/web/FloraWeb/Components/AdvisoryListItem.hs b/src/web/FloraWeb/Components/AdvisoryListItem.hs
@@ -27,8 +27,11 @@ advisoryListRow preview = do
         High -> ratingHigh score
         Critical -> ratingCritical score
   div_ [class_ "package-advisory-list-item"] $ do
-    div_ [class_ "package-advisory-list-item__hsec-id"] $
+    div_ [class_ "package-advisory-list-item__hsec-id md:order-1"] $ do
       a_ [href_ href] (toHtml $ display preview.hsecId)
+      span_ [class_ "package-advisory-list-item__inline-published"] $
+        toHtml $
+          Time.formatTime Time.defaultTimeLocale "%_d %b %Y" preview.published
     div_ [class_ "package-advisory-list-item__summary"] (toHtml preview.summary)
     div_ [class_ "package-advisory-list-item__published"] $
       toHtml $

diff --git a/src/web/FloraWeb/Components/Pill.hs b/src/web/FloraWeb/Components/Pill.hs
@@ -22,24 +22,24 @@ customBuildType =
 
 fixAvailable :: FloraHTML
 fixAvailable =
-  span_ [class_ "advisory-list-item__fix-available"] "Fix available"
+  span_ [class_ "advisory-list-item__severity-pill advisory-list-item__fix-available"] "Fix available"
 
 ratingCritical :: Float -> FloraHTML
 ratingCritical score =
-  span_ [dataText_ "Critical", class_ "advisory-list-item__severity-critical"] $ toHtml @Text $ "Critical - " <> display score
+  span_ [dataText_ "Critical", class_ "advisory-list-item__severity-pill advisory-list-item__severity-critical"] $ toHtml @Text $ "Critical - " <> display score
 
 ratingHigh :: Float -> FloraHTML
 ratingHigh score =
-  span_ [dataText_ "High", class_ "advisory-list-item__severity-high"] $ toHtml @Text $ "High - " <> display score
+  span_ [dataText_ "High", class_ "advisory-list-item__severity-pill advisory-list-item__severity-high"] $ toHtml @Text $ "High - " <> display score
 
 ratingLow :: Float -> FloraHTML
 ratingLow score =
-  span_ [dataText_ "Low", class_ "advisory-list-item__severity-low"] $ toHtml @Text $ "Low - " <> display score
+  span_ [dataText_ "Low", class_ "advisory-list-item__severity-pill advisory-list-item__severity-low"] $ toHtml @Text $ "Low - " <> display score
 
 ratingMedium :: Float -> FloraHTML
 ratingMedium score =
-  span_ [dataText_ "Medium", class_ "advisory-list-item__severity-medium"] $ toHtml @Text $ "Medium - " <> display score
+  span_ [dataText_ "Medium", class_ "advisory-list-item__severity-pill advisory-list-item__severity-medium"] $ toHtml @Text $ "Medium - " <> display score
 
 ratingNone :: FloraHTML
 ratingNone =
-  span_ [dataText_ "None", class_ "advisory-list-item__severity-none"] "None"
+  span_ [dataText_ "None", class_ "advisory-list-item__severity-pill advisory-list-item__severity-none"] "None"