Skip to content

Commit

Permalink
cleanup: minor ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirkobrombin
mirkobrombin committed Jan 22, 2024
1 parent c6d0ecc commit 8c9ae2b
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 41 deletions.
4 changes: 1 addition & 3 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,7 @@
</div>
</div>

<div class="container">
<router-view />
</div>
<router-view />

<br />
<br />
Expand Down
37 changes: 36 additions & 1 deletion src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@ p span.badge {
.topbar {
background-color: #fff;
border-bottom: 1px solid #dddddd;
margin: 0 0 18px 0;
position: sticky;
top: 0;
z-index: 9;
Expand Down Expand Up @@ -327,4 +326,40 @@ p span.badge {

.panel-block-header.panel-block-header--has-icon+.panel-block-content {
margin-left: 28px;
}

.hero.is-title {
margin-bottom: 30px;
}

.hero.is-primary {
background-color: #f5f5f5;
}

.hero.is-primary .title,
.hero.is-primary .subtitle {
color: #3c3f41;
}

.hero.is-primary .title {
margin-bottom: 36px;
}

.breadcrumb.is-main {
margin: 0;
padding: 20px;
border-bottom: 1px solid #dddddd;
position: sticky;
top: 52px;
background-color: #fff;
z-index: 1;
}

.breadcrumb.is-main~.paned .sidebar aside {
top: 130px;
height: calc(100vh - 130px);
}

.card .title.is-4 {
line-height: 1.4;
}
34 changes: 19 additions & 15 deletions src/views/ArticleView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
<template>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><a>{{ lang }}</a></li>
<li class="is-active">
<a href="#" aria-current="page">
{{ article.Title }}
</a>
</li>
</ul>
<nav class="breadcrumb is-main" aria-label="breadcrumbs">
<div class="container">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><a>{{ lang }}</a></li>
<li class="is-active">
<a href="#" aria-current="page">
{{ article.Title }}
</a>
</li>
</ul>
</div>
</nav>
<section class="hero">
<div class="hero-body">
<h1 class="title">{{ article.Title }}</h1>
<p class="subtitle">{{ article.Description }}</p>
<section class="hero is-primary is-title">
<div class="container">
<div class="hero-body has-text-centered">
<h1 class="title">{{ article.Title }}</h1>
<p class="subtitle">{{ article.Description }}</p>
</div>
</div>
</section>
<div class="paned">
<div class="paned container">
<div class="sidebar">
<aside class="menu">
<p class="menu-label">
Expand Down
14 changes: 12 additions & 2 deletions src/views/CollectionView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
<template>
<div>
<section class="hero is-primary is-title">
<div class="container">
<div class="hero-body has-text-centered">
<h1 class="title">{{ activeCollection!.title }}</h1>
<p class="subtitle">{{ activeCollection!.description }}</p>
</div>
</div>
</section>
<div class="container">
<div class="flex-grid flex-grid--cols-2" v-if="articlesResponse?.articles">
<div v-for="(article) in articles" :key="article.Slug">
<div class="card">
Expand Down Expand Up @@ -31,7 +39,7 @@

<script lang="ts">
import { defineComponent } from "vue";
import type { ArticlesResponse, Article, ChronosConfig } from "@/core/models";
import type { ArticlesResponse, Article, ChronosConfig, ChronosCollection } from "@/core/models";
import { useChronosStore } from "@/core/store";
import { useHead } from 'unhead'
Expand All @@ -43,6 +51,7 @@ export default defineComponent({
articles: [] as Article[],
chronosConfig: {} as ChronosConfig,
collectionName: "",
activeCollection: {} as ChronosCollection | undefined,
};
},
computed: {
Expand All @@ -54,6 +63,7 @@ export default defineComponent({
// @ts-ignore
this.chronosConfig = await this.$chronosAPI.config();
this.collectionName = this.$route.params.collection as string;
this.activeCollection = this.chronosConfig.chronosCollections.find((collection) => collection.shortName === this.collectionName);
this.fetchArticles();
Expand Down
49 changes: 29 additions & 20 deletions src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,36 @@
<template>
<div v-if="chronosConfig">
<h1 class="title is-2">Collections</h1>
<div class="columns is-multiline">
<div v-for="(collection, index) in chronosConfig.chronosCollections" :key="index" class="column is-half">
<router-link :to="`/collections/${collection.shortName}`">
<div class="card">
<div class="card-content">
<p class="title is-4">{{ collection.title }}</p>
<p class="subtitle is-6">{{ collection.description }}</p>
<div class="content">
<p class="is-size-7 is-uppercase has-text-weight-bold flex items-center no-gap">
<span class="icon is-small">
<i class="mdi material-icons">book</i>
</span>
<span v-if="articleCounts[collection.shortName] !== undefined" class="ml-2">
{{ articleCounts[collection.shortName] }} Articles
</span>
<span v-else>Loading...</span>
</p>
<section class="hero is-primary is-title">
<div class="container">
<div class="hero-body has-text-centered">
<h1 class="title">{{ chronosConfig.title }}</h1>
<p class="subtitle">Collections</p>
</div>
</div>
</section>
<div class="container">
<div class="columns is-multiline">
<div v-for="(collection, index) in chronosConfig.chronosCollections" :key="index" class="column is-half">
<router-link :to="`/collections/${collection.shortName}`">
<div class="card">
<div class="card-content">
<p class="title is-4">{{ collection.title }}</p>
<p class="subtitle is-6">{{ collection.description }}</p>
<div class="content">
<p class="is-size-7 is-uppercase has-text-weight-bold flex items-center no-gap">
<span class="icon is-small">
<i class="mdi material-icons">book</i>
</span>
<span v-if="articleCounts[collection.shortName] !== undefined" class="ml-2">
{{ articleCounts[collection.shortName] }} Articles
</span>
<span v-else>Loading...</span>
</p>
</div>
</div>
</div>
</div>
</router-link>
</router-link>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 8c9ae2b

Please sign in to comment.