WIP(shop): add item names and unlocking

website/client/src/components/ui/itemRows.vue

@@ -18,7 +18,7 @@
       </p>
     </div>
     <show-more-button
-      v-if="items.length > itemsPerRow"
+      v-if="foldButton && items.length > itemsPerRow"
       :show-all="showAll"
       @click="toggleItemsToShow()"
     />
@@ -29,7 +29,11 @@
   @import '~@/assets/scss/colors.scss';
 
   .item-rows {
-    margin-right: -1.5rem;
+    max-width: 944px;
+  }
+
+  .btn-show-more {
+    max-width: 920px;
   }
 </style>
 
@@ -64,6 +68,10 @@ export default {
     maxItemsPerRow: {
       type: Number,
     },
+    foldButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   data () {
     return {
@@ -82,7 +90,7 @@ export default {
     },
   },
   created () {
-    this.showAll = this.$_openedItemRows_isToggled(this.type);
+    this.showAll = this.$_openedItemRows_isToggled(this.type) || !this.foldButton;
   },
   methods: {
     toggleItemsToShow () {

website/client/src/components/ui/layoutSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="layout-section">
     <div class="clearfix">
       <h2 class="float-left mb-3 filters-title">
         {{ title }}
@@ -22,13 +22,16 @@ export default {
 </script>
 
 <style scoped lang="scss">
- @media only screen and (max-width: 768px) {
-    .filters, .filters-title {
-      float: none;
-      button {
-        margin-right: 4em;
-        margin-bottom: 1em;
-      }
+.clearfix {
+  max-width: 920px;
+}
+@media only screen and (max-width: 768px) {
+  .filters, .filters-title {
+    float: none;
+    button {
+      margin-right: 4em;
+      margin-bottom: 1em;
     }
   }
+}
 </style>