Refined network layout

This commit is contained in:
ThePendulum 2020-01-05 03:02:02 +01:00
parent 44d48916ba
commit 746b9bf201
4 changed files with 40 additions and 8 deletions

View File

@ -152,18 +152,18 @@ export default {
} }
.sidebar { .sidebar {
background: $profile;
height: 100%; height: 100%;
width: 18rem; width: 18rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
border-right: solid 1px $shadow-hint;
color: $text-contrast; color: $text-contrast;
overflow: hidden; overflow: hidden;
} }
.sidebar .title { .sidebar .title {
border-bottom: solid 1px $shadow-hint; border-bottom: solid 1px $highlight-hint;
} }
.logo { .logo {
@ -189,10 +189,14 @@ export default {
.sites.compact { .sites.compact {
display: none; display: none;
background: $profile;
grid-row: 1;
} }
.expand { .expand {
display: none; display: none;
color: $text-contrast;
background: $profile;
padding: .5rem; padding: .5rem;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;

View File

@ -1,5 +1,18 @@
<template> <template>
<ul class="nolist sites"> <ul class="nolist sites">
<a
v-if="network"
:href="network.url"
target="_blank"
rel="noopener noreferrer"
class="tile"
>
<img
:src="`/img/logos/${network.slug}/network.png`"
class="logo"
>
</a>
<li <li
v-for="site in sites" v-for="site in sites"
:key="`site-${site.id}`" :key="`site-${site.id}`"
@ -17,6 +30,10 @@ export default {
SiteTile, SiteTile,
}, },
props: { props: {
network: {
type: Object,
default: null,
},
sites: { sites: {
type: Array, type: Array,
default: () => [], default: () => [],
@ -49,4 +66,8 @@ export default {
grid-template-columns: repeat(2, .5fr); grid-template-columns: repeat(2, .5fr);
} }
} }
.logo {
width: 15rem;
}
</style> </style>

View File

@ -4,11 +4,11 @@
:title="network.name" :title="network.name"
class="tile" class="tile"
> >
<object <img
:data="`/img/logos/${network.slug}/network.png`" :src="`/img/logos/${network.slug}/network.png`"
type="image/png" :alt="network.name"
class="logo" class="logo"
>{{ network.name }}</object> >
</a> </a>
</template> </template>

View File

@ -636,6 +636,9 @@
.sites.expanded[data-v-7bebaa3e] { .sites.expanded[data-v-7bebaa3e] {
grid-template-columns: repeat(2, 0.5fr); grid-template-columns: repeat(2, 0.5fr);
} }
.logo[data-v-7bebaa3e] {
width: 15rem;
}
/* $primary: #ff886c; */ /* $primary: #ff886c; */
@media (max-width: 1200px) { @media (max-width: 1200px) {
@ -664,6 +667,7 @@
padding: 1rem; padding: 1rem;
} }
.sidebar[data-v-e2e12602] { .sidebar[data-v-e2e12602] {
background: #222;
height: 100%; height: 100%;
width: 18rem; width: 18rem;
display: -webkit-box; display: -webkit-box;
@ -672,12 +676,11 @@
-webkit-box-direction: normal; -webkit-box-direction: normal;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
border-right: solid 1px rgba(0, 0, 0, 0.1);
color: #fff; color: #fff;
overflow: hidden; overflow: hidden;
} }
.sidebar .title[data-v-e2e12602] { .sidebar .title[data-v-e2e12602] {
border-bottom: solid 1px rgba(0, 0, 0, 0.1); border-bottom: solid 1px rgba(255, 255, 255, 0.075);
} }
.logo[data-v-e2e12602] { .logo[data-v-e2e12602] {
width: 100%; width: 100%;
@ -705,9 +708,13 @@
} }
.sites.compact[data-v-e2e12602] { .sites.compact[data-v-e2e12602] {
display: none; display: none;
background: #222;
grid-row: 1;
} }
.expand[data-v-e2e12602] { .expand[data-v-e2e12602] {
display: none; display: none;
color: #fff;
background: #222;
padding: .5rem; padding: .5rem;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;