DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Improved network and site layout and design.

This commit is contained in:
ThePendulum 2020-01-05 03:27:26 +01:00
parent b26e199d94
commit a94edca073
3 changed files with 62 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/components/networks/network.vue
View File

@ -8,6 +8,7 @@
<div class="network"> <div class="network">
<div class="sidebar"> <div class="sidebar">
<a <a
v-tooltip.bottom="`Go to ${network.url}`"
:href="network.url" :href="network.url"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -32,6 +33,7 @@
<div class="header"> <div class="header">
<a <a
v-tooltip.bottom="`Go to ${network.url}`"
:href="network.url" :href="network.url"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@ -45,34 +47,12 @@
</div> </div>
<div class="content-inner"> <div class="content-inner">
<div <Sites
v-if="sites.length" v-if="sites.length"
:sites="sites"
class="compact" class="compact"
> :class="{ expanded }"
<span />
v-if="expanded"
class="expand"
@click="expanded = false"
>⇱ collapse</span>
<Sites
:sites="sites"
class="compact"
:class="{ expanded }"
/>
<span
v-if="!expanded"
class="expand"
@click="expanded = true"
>expand ⇲</span>
<span
v-if="expanded"
class="expand"
@click="expanded = false"
>⇱ collapse</span>
</div>
<Releases :releases="releases" /> <Releases :releases="releases" />
</div> </div>
@ -174,8 +154,7 @@ export default {
object-fit: contain; object-fit: contain;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
margin: 0; filter: $logo-highlight;
filter: $logo-shadow;
} }
.header { .header {

83
assets/components/sites/site.vue
View File

@ -8,35 +8,32 @@
<div class="header"> <div class="header">
<a <a
v-if="site.url" v-if="site.url"
v-tooltip.bottom="`Go to ${site.url}`"
:href="site.url" :href="site.url"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="title" class="link link-site"
> >
<img <img
:src="`/img/logos/${site.network.slug}/${site.slug}.png`" :src="`/img/logos/${site.network.slug}/${site.slug}.png`"
:title="site.name" :title="site.name"
:alt="site.name" :alt="site.name"
class="logo" class="logo logo-site"
> >
</a> </a>
<span class="link"> <a
<span class="networklogo-container"> v-tooltip.bottom="`Go to ${site.network.name} overview`"
Part of :href="`/network/${site.network.slug}`"
<a class="link link-network"
:href="`/network/${site.network.slug}`" >
class="networklogo-link" <img
> :src="`/img/logos/${site.network.slug}/network.png`"
<img :title="site.network.name"
:src="`/img/logos/${site.network.slug}/network.png`" :alt="site.network.name"
:title="site.network.name" class="logo logo-network"
:alt="site.network.name" >
class="logo" </a>
>
</a>
</span>
</span>
</div> </div>
<div class="content-inner"> <div class="content-inner">
@ -84,49 +81,37 @@ export default {
.header { .header {
background: $profile; background: $profile;
color: $text-contrast;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
border-bottom: solid 1px $shadow-weak;
}
.title {
padding: 1rem;
}
.heading {
padding: 0;
margin: 0 0 1rem 0;
} }
.link { .link {
display: flex; padding: 1rem;
flex-shrink: 0; }
flex-direction: column;
align-items: flex-end; .link-site {
margin: 0 1rem 0 0;
justify-content: flex-start;
} }
.logo { .logo {
width: 20rem; width: 100%;
max-height: 6rem; max-width: 15rem;
max-height: 5rem;
object-fit: contain; object-fit: contain;
margin: 0 .5rem 1rem 0; object-position: 0 0;
filter: $logo-highlight;
} }
.networklogo-container { @media(max-width: $breakpoint) {
display: flex; .link {
align-items: center; padding: .5rem 1rem;
} }
.sites, .logo {
.scenes { max-height: 2.5rem;
display: grid; }
grid-gap: 1rem;
margin: 0 0 1rem 0;
}
.sites {
grid-template-columns: repeat(auto-fit, 15rem);
} }
</style> </style>

56
public/css/style.css
View File

@ -521,53 +521,40 @@
/* $primary: #ff886c; */ /* $primary: #ff886c; */
.header[data-v-194630f6] { .header[data-v-194630f6] {
background: #222; background: #222;
color: #fff;
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
-webkit-box-align: center; -webkit-box-align: center;
align-items: center; align-items: center;
flex-wrap: wrap;
-webkit-box-pack: justify; -webkit-box-pack: justify;
justify-content: space-between; justify-content: space-between;
border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}
.title[data-v-194630f6] {
padding: 1rem;
}
.heading[data-v-194630f6] {
padding: 0;
margin: 0 0 1rem 0;
} }
.link[data-v-194630f6] { .link[data-v-194630f6] {
display: -webkit-box; padding: 1rem;
display: flex; }
flex-shrink: 0; .link-site[data-v-194630f6] {
-webkit-box-orient: vertical; margin: 0 1rem 0 0;
-webkit-box-direction: normal; -webkit-box-pack: start;
flex-direction: column; justify-content: flex-start;
-webkit-box-align: end;
align-items: flex-end;
} }
.logo[data-v-194630f6] { .logo[data-v-194630f6] {
width: 20rem; width: 100%;
max-height: 6rem; max-width: 15rem;
max-height: 5rem;
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
margin: 0 .5rem 1rem 0; -o-object-position: 0 0;
object-position: 0 0;
-webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
} }
.networklogo-container[data-v-194630f6] { @media (max-width: 720px) {
display: -webkit-box; .link[data-v-194630f6] {
display: flex; padding: .5rem 1rem;
-webkit-box-align: center;
align-items: center;
} }
.sites[data-v-194630f6], .logo[data-v-194630f6] {
.scenes[data-v-194630f6] { max-height: 2.5rem;
display: grid;
grid-gap: 1rem;
margin: 0 0 1rem 0;
} }
.sites[data-v-194630f6] {
grid-template-columns: repeat(auto-fit, 15rem);
} }
/* $primary: #ff886c; */ /* $primary: #ff886c; */
@ -693,9 +680,8 @@
object-fit: contain; object-fit: contain;
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
margin: 0; -webkit-filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
-webkit-filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2)); filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.2));
filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
} }
.header[data-v-e2e12602] { .header[data-v-e2e12602] {
background: #222; background: #222;