Commit 01a90274 authored by David Trattnig's avatar David Trattnig
Browse files

Feat: Mobile-first theming

parent 4c8a9b6e
/** MATERIAL DESIGN SETTINGS **/
/* Theme colors. */
:root {
--mdc-theme-primary: #40b3ff;
......@@ -39,9 +42,7 @@
--mdc-layout-grid-column-width-phone: 72px;
}
/*** AURA ICONS ***/
/** AURA ICONS **/
.aura-icons > div {
background-image: url(assets/aura-logo.png);
......@@ -62,7 +63,7 @@
color: transparent;
}
/*** AURA CARDS ***/
/** AURA CARDS **/
.aura-card {
margin: 8px;
......@@ -74,19 +75,64 @@
white-space: nowrap;
overflow: hidden;
}
.card-container.detail h2 {
font-size: 1.8rem;
/** RESPONSIVE SETTINGS **/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
.card-container h1 {
font-size: 1.3rem;
}
.card-container h2 {
font-size: 1.2rem;
}
.card-container h3 {
font-size: 1.0rem;
}
.card-container h4 {
font-size: 0.9rem;
}
}
.card-container.detail h3 {
font-size: 1.6rem;
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/** MISC **/
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.card-container h1 {
font-size: 1.8rem;
}
.card-container h2 {
font-size: 1.5rem;
}
.card-container h3 {
font-size: 1.3rem;
}
.card-container h4 {
font-size: 1.2rem;
}
.card-container.list .aura-card.category {
width: 400px;
}
.card-container.list:not(.contained) .aura-card.show {
width: calc(50% - 32px);
}
.card-container.detail .aura-card.show .show-image {
width: 320px;
height: 180px;
}
.card-container.list:not(.contained) .aura-card.host {
width: 280px;
height: 280px;
}
}
.mdc-layout-grid {
width: 100%;
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
.language-key {
text-transform: uppercase;
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
\ No newline at end of file
......@@ -45,14 +45,9 @@
</script>
<style lang="scss">
/* SMUI components need to be selected via global namespace */
* :global(.aura-card.category) {
width: 400px;
height: 300px;
margin: 4px;
float: left;
height: 270px;
}
* :global(.aura-card.category > div) {
height: 100%;
......
......@@ -86,19 +86,14 @@
}
/* SMUI components need to be selected via global namespace */
* :global(.load-more > button) {
width: 100%;
}
* :global(.list .aura-card.host) {
min-width: 280px;
min-height: 280px;
width: 280px;
height: 280px;
width: 100%;
margin: 4px;
float: left;
}
</style>
<div class="aura-hosts">
......
......@@ -115,13 +115,9 @@
</script>
<style lang="scss">
/* SMUI components need to be selected via global namespace */
* :global(.aura-card.show) {
min-width: 320px;
min-height: 200px;
width: calc(50% - 32px);
width: 100%;
float: left;
}
* :global(.show-content) {
......
......@@ -19,11 +19,12 @@
<style lang="scss">
/* SMUI components need to be selected via global namespace */
* :global(.show-list-small) {
width: calc(100% - 16px);
}
* :global(.show-list-small .aura-card.show) {
background-color: var(--mdc-theme-surface);
}
* :global(.show-list-small .card-media-square) {
max-width: 72px;
max-height: 72px;
......@@ -99,7 +100,7 @@
{#if shows}
<div class="show-section">
<h2>{labelShows}</h2>
<div class="show-list-small card-container list">
<div class="show-list-small card-container list contained">
{#each shows as show}
<ShowCardSmall {show} {urlShowDetail} {renderhtml} />
{/each}
......
......@@ -33,19 +33,19 @@
</script>
<style lang="scss">
/* SMUI components need to be selected via global namespace */
* :global(.header) {
padding: 1rem 1rem 0 1rem;
}
* :global(.subtitle) {
margin-top: 0;
}
* :global(.image-content) {
padding: 0;
}
* :global(.show-image) {
width: 100%;
height: 180px;
width: 320px;
// background-color: #eee;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
......@@ -92,7 +92,6 @@
padding-right: 8px;
margin-left: -42px;
}
</style>
<template>
......@@ -158,7 +157,7 @@
{#if hosts}
<Content class="host-section">
<div class="host-list-small card-container list">
<div class="host-list-small card-container list contained">
{#each hosts as host}
<HostCardAvatar {host} {urlHostDetail} {renderhtml} displayOverlay={true} />
{/each}
......@@ -174,7 +173,7 @@
{#if episodes}
<h2 class="title-episode-list">{labelEpisodes}</h2>
<div class="episode-list-small card-container list current-episodes">
<div class="episode-list-small card-container list contained current-episodes">
{#each episodes as episode}
<span class={episode.isCurrent ? 'highlight' : ''}>
<EpisodeCardSmall
......
/** Cards **/
.aura-card {
float: left;
margin: 8px;
width: calc(100% - 16px);
}
/** Buttons **/
button {
......@@ -12,20 +20,28 @@ button {
display: none;
}
/** Misc **/
.mdc-layout-grid {
width: 100%;
}
.language-key {
text-transform: uppercase;
}
/** Loading Spinner **/
.loading {
width: 100%;
text-align: center;
}
.aura-spinner {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
}
.aura-spinner div {
position: absolute;
border: 4px solid gray;
......@@ -33,11 +49,9 @@ button {
border-radius: 50%;
animation: aura-spinner 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.aura-spinner div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes aura-spinner {
0% {
top: 18px;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment