fix: some card styling

villetakanen · Dec 12, 2021 · db06af7 · db06af7
1 parent 4cec139
commit db06af7
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 6 deletions.
diff --git a/src/components/layout/Card.vue b/src/components/layout/Card.vue
@@ -1,16 +1,31 @@
 <template>
   <section
     class="card"
-    :class="{ riseTwo: rise === 2, riseThree: rise === 3 , riseFour: rise === 4, riseZero: rise === 0, secondary: secondary }"
+    :class="{
+      riseTwo: rise === 2,
+      riseThree: rise === 3 ,
+      riseFour: rise === 4,
+      riseZero: rise === 0,
+      secondary: secondary,
+      hasBottom: hasBottom
+    }"
   >
     <slot />
+    <Toolbar
+      v-if="hasBottom"
+      class="bottomToolbar"
+    >
+      <slot name="bottom" />
+    </Toolbar>
   </section>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import Toolbar from './Toolbar.vue'
 
 export default defineComponent({
+  components: { Toolbar },
   props: {
     rise: {
       type: Number,
@@ -22,6 +37,10 @@ export default defineComponent({
       required: false,
       default: false
     }
+  },
+  setup (props, { slots }) {
+    const hasBottom = !!slots.bottom
+    return { hasBottom }
   }
 })
 </script>
@@ -36,6 +55,8 @@ section.card
   background-color: var(--chroma-clear)
   padding: 16px
   border-radius: 12px
+  position: relative
+  overflow: hidden
   &.riseTwo
     @include Rise2()
   &.riseThree
@@ -46,6 +67,22 @@ section.card
     box-shadow: none
   &.secondary
     background: linear-gradient(-42deg, var(--chroma-secondary-f) 0%, var(--chroma-secondary-c) 100%)
+  &.hasBottom
+    padding-bottom: 24px
+  h1
+    a
+      color: var(--card-header-color)
+
+  .bottomToolbar
+    position: absolute
+    bottom: -8px
+    left: 0
+    width: 100%
+    box-sizing: border-box
+    height: 24px
+    align-items: center
+    padding: 16px
+    background-color: var(--card-toolbar-background-color)
 
 section + section.card
   margin-top: 12px

diff --git a/src/components/sites/sitecard/SiteCard.vue b/src/components/sites/sitecard/SiteCard.vue
@@ -1,5 +1,12 @@
 <template>
-  <Card class="SiteCard">
+  <Card
+    class="SiteCard"
+    :class="{
+      themeDD: site.theme.name === 'dd',
+      themeQuick: site.theme.name === 'quick',
+      themeHomebrew: site.theme.name === 'homebrew'
+    }"
+  >
     <div
       v-if="site.theme.avatarImageURL"
       class="avatar"
@@ -28,9 +35,18 @@
     <p style="clear:both">
       {{ site.description }}
     </p>
-    <p class="TypeCaption">
-      {{ $t('meta.updatedAt') }} {{ toDisplayString(site.updatedAt) }}
-    </p>
+    <template #bottom>
+      <Icon
+        v-if="site.hidden"
+        style="opacity:0.44"
+        small
+        name="hidden"
+      />
+      <SpacerDiv />
+      <p class="TypeCaption">
+        <i>{{ $t('meta.updatedAt') }} {{ toDisplayString(site.updatedAt) }}</i>
+      </p>
+    </template>
   </Card>
 </template>
 
@@ -42,8 +58,10 @@ import { useSites } from '@/state/sites'
 import { computed, defineComponent } from 'vue'
 import { toDisplayString } from '@/utils/firebaseTools'
 
+import SpacerDiv from '@/components/layout/SpacerDiv.vue'
+
 export default defineComponent({
-  components: { Card, Icon },
+  components: { Card, Icon, SpacerDiv },
   props: {
     siteid: {
       type: String,

diff --git a/src/styles/base.sass b/src/styles/base.sass
@@ -10,6 +10,7 @@
 @import charactersheets.sass
 @import colors.sass
 @import formcontrols.sass
+@import themes/themeDD.sass
 
 // *** Spacing ********************************************************
 :root

diff --git a/src/styles/colors.sass b/src/styles/colors.sass
@@ -38,6 +38,7 @@
 
   // https://imgur.com/UuoVNSc
   --color-ddb-red: #C73032
+  --color-ddb-red-light: #e9acad
   --color-ddb-sorcerer: #992e2e
 
   --color-a-a: #002337

diff --git a/src/styles/themes/themeDD.sass b/src/styles/themes/themeDD.sass
@@ -0,0 +1,4 @@
+.themeDD
+  --card-header-color: var(--color-ddb-sorcerer)
+  --card-toolbar-color: var(--color-ddb-sorcerer)
+  --card-toolbar-background-color: var(--color-ddb-red-light)