(style) consistently style headers with .d-flex in such a way that they correctly wrap and have spacing on sm and xs

This commit is contained in:
Valentyne Stigloher 2024-09-17 13:09:42 +02:00
parent 314952d626
commit f599b507a8
5 changed files with 31 additions and 22 deletions

View File

@ -1,15 +1,16 @@
<template>
<Page>
<h2 class="d-flex justify-content-between">
<h2
class="d-flex justify-content-between align-items-start align-items-md-center
flex-column flex-md-row gap-2"
>
<span>
<Icon v="pen-nib" />
<T>links.blog</T>
</span>
<span>
<a href="/blog.atom" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">
<T icon="rss">links.blogFeed</T>
</a>
</span>
<a href="/blog.atom" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary">
<T icon="rss">links.blogFeed</T>
</a>
</h2>
<AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
<Loading :value="posts">

View File

@ -3,17 +3,18 @@
<div v-if="year" :class="basic ? 'py-5' : ''">
<CommunityNav v-if="!basic" />
<h2 class="d-flex justify-content-between flex-column flex-md-row">
<h2
class="d-flex justify-content-between align-items-start align-items-md-center
flex-column flex-md-row gap-2"
>
<span>
<Icon v="calendar-star" />
<T>calendar.headerLong</T> <small class="text-muted">({{ year.year }})</small>
</span>
<span v-if="basic" class="h4 mt-2">
<nuxt-link :to="{ name: 'calendar' }">
<Logo />
<T>domain</T>/{{ config.calendar.route }}
</nuxt-link>
</span>
<nuxt-link v-if="basic" :to="{ name: 'calendar' }" class="fs-4">
<Logo />
<T>domain</T>/{{ config.calendar.route }}
</nuxt-link>
<span v-else class="btn-group">
<button :class="['btn', labels ? 'btn-outline-primary' : 'btn-primary']" @click="labels = false">
<Icon v="table" />

View File

@ -3,18 +3,19 @@
<div v-if="year && year.eventsByDate[day.toString()] || basic" :class="basic ? 'py-5' : ''">
<CommunityNav v-if="!basic" />
<h2 class="d-flex justify-content-between">
<h2
class="d-flex justify-content-between align-items-start align-items-md-center
flex-column flex-md-row gap-2"
>
<span>
<Icon v="calendar-star" />
<nuxt-link :to="{ name: 'calendar' }"><T>calendar.headerLong</T></nuxt-link>
<small class="text-muted">({{ day }})</small>
</span>
<span v-if="basic" class="h4 mt-2">
<nuxt-link :to="{ name: 'calendar' }">
<Logo />
<T>domain</T>/{{ config.calendar.route }}
</nuxt-link>
</span>
<nuxt-link v-if="basic" :to="{ name: 'calendar' }" class="fs-4">
<Logo />
<T>domain</T>/{{ config.calendar.route }}
</nuxt-link>
</h2>
<AdPlaceholder v-if="!basic" phkey="main-0" />

View File

@ -2,7 +2,10 @@
<Page>
<NotFound v-if="pronounGroups === undefined" />
<div v-else>
<h2 class="d-flex justify-content-between">
<h2
class="d-flex justify-content-between align-items-start align-items-md-center
flex-column flex-md-row gap-2"
>
<span>
<Icon v="tag" />
<T>pronouns.intro</T><T>quotation.colon</T>

View File

@ -2,7 +2,10 @@
<Page>
<NotFound v-if="!selectedPronoun" />
<div v-else>
<h2 class="d-md-flex justify-content-between">
<h2
class="d-flex justify-content-between align-items-start align-items-md-center
flex-column flex-md-row gap-2"
>
<div>
<Icon v="tag" />
<T>pronouns.intro</T><T>quotation.colon</T>