refactor(CreaturesLibraryPage): refactor styles

rudnovd · Feb 27, 2022 · 92dbda6 · 92dbda6
1 parent 55d8a2f
commit 92dbda6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/components/creaturesLibrary/CreatureCard.vue b/src/components/creaturesLibrary/CreatureCard.vue
@@ -76,12 +76,12 @@ export default defineComponent({
 <style lang="scss" scoped>
 .creature-card {
   display: grid;
-  grid-template-columns: 150px 1fr;
+  grid-template-columns: 105px 1fr;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
   transition: background 0.25s;
 
-  @include media-large {
+  @include media-medium {
     grid-template-columns: 150px 1fr;
   }
 
@@ -120,7 +120,7 @@ export default defineComponent({
 
 .creature-info {
   display: grid;
-  grid-template-rows: repeat(5, 30px) 1fr;
+  grid-template-rows: repeat(5, minmax(30px, 1fr)) 1fr;
   grid-template-columns: 100%;
 
   @include media-medium {
@@ -130,8 +130,7 @@ export default defineComponent({
 
 .parameter {
   display: grid;
-  grid-template-rows: 29px;
-  grid-template-columns: 2fr 4fr;
+  grid-template-columns: minmax(120px, 2fr) 4fr;
   align-items: center;
   padding-left: 4px;
   border-bottom: 1px solid rgb(222, 226, 230);
@@ -163,6 +162,8 @@ export default defineComponent({
 .creature-description {
   grid-column: 1 / -1;
   padding-left: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .creature-card.selected {
@@ -175,6 +176,7 @@ export default defineComponent({
 
 .paramater-with-resources {
   display: flex;
+  flex-wrap: wrap;
   grid-gap: 8px;
   align-items: center;
 

diff --git a/src/views/CreaturesLibraryPage.vue b/src/views/CreaturesLibraryPage.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="creatures-library-page">
-    <div class="library-header">
+    <section class="library-header">
       <div class="towns-anchors">
         <ObjectPortrait
           v-for="town in towns.slice(0, 10)"
@@ -28,7 +28,7 @@
           @input="searchUnit"
         />
       </div>
-    </div>
+    </section>
 
     <div v-for="town in towns.slice(0, 10)" :key="town.name" class="town">
       <h2 :id="town.name" class="town-name">{{ town.name }}</h2>
@@ -153,11 +153,14 @@ export default defineComponent({
 
 <style lang="scss">
 .creatures-library-page {
-  display: flex;
-  flex-direction: column;
   min-width: 320px;
-  max-width: min(90%, 1920px);
-  margin: 20px auto 0 auto;
+  max-width: 1920px;
+  padding: 0 8px;
+  margin: 0 auto;
+
+  @include media-medium {
+    padding: 0 24px;
+  }
 }
 
 .library-header {