Set width for cards

openSUSE · Apr 17, 2023 · 0cc89f4 · 0cc89f4
1 parent 39e4017
commit 0cc89f4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/src/api/app/assets/stylesheets/webui/groups.scss b/src/api/app/assets/stylesheets/webui/groups.scss
@@ -1,14 +1,21 @@
 #group-users {
-  .group-user {
-    width: 19.7rem;
+  .card {
+    width: 100%;
+
+    .card-title {
+      @extend .text-break;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 48%;
+    }
 
     @include media-breakpoint-up(xl) {
-      width: 21.7rem;
+      width: 32%;
     }
 
     @include media-breakpoint-up(xxl) {
-      width: 22.4rem;
+      width: 23%;
     }
   }
 }
-
diff --git a/src/api/app/assets/stylesheets/webui/repositories.scss b/src/api/app/assets/stylesheets/webui/repositories.scss
@@ -10,3 +10,21 @@ details[open].repository-path {
   .less{ display: inline; }
   .more{ display: none; }
 }
+
+#repositories {
+  .card {
+    width: 100%;
+
+    .card-title {
+      @extend .text-break;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 48%;
+    }
+
+    @include media-breakpoint-up(xxl) {
+      width: 32%;
+    }
+  }
+}
diff --git a/src/api/app/assets/stylesheets/webui/tokens.scss b/src/api/app/assets/stylesheets/webui/tokens.scss
@@ -1,17 +1,21 @@
 #tokens {
   .card {
-    max-width: 19.7rem;
+    width: 100%;
 
     .card-title {
       @extend .text-break;
     }
 
+    @include media-breakpoint-up(lg) {
+      width: 48%;
+    }
+
     @include media-breakpoint-up(xl) {
-      max-width: 21.7rem;
+      width: 32%;
     }
 
     @include media-breakpoint-up(xxl) {
-      max-width: 22.4rem;
+      width: 23%;
     }
   }
 }
diff --git a/src/api/app/views/webui/repositories/_project_repositories.html.haml b/src/api/app/views/webui/repositories/_project_repositories.html.haml
@@ -3,7 +3,7 @@
   .card-body
     %h3.pb-2= pagetitle
 
-    .d-flex.flex-wrap.gap-4.align-self-stretch
+    .d-flex.flex-wrap.gap-4.align-self-stretch#repositories
       - repositories.each do |repository|
         = render partial: 'repository_entry', locals: { repository: repository, project: project, download_url: configuration['download_url'],
                     user_can_modify: user_can_modify, available_architectures: available_architectures }