From 7aee9274ac9e4dc4af107ace4079af8454f4ec1f Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Wed, 26 Jan 2022 04:49:47 +0100
Subject: [PATCH] improve responsiveness
---
components/member/Card.vue | 35 +++++++++++++++++-----------
components/navigation/Breadcrumb.vue | 2 +-
layouts/default.vue | 5 +++-
3 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/components/member/Card.vue b/components/member/Card.vue
index 1af4ce2..7c729eb 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -1,18 +1,20 @@
<template>
<div class="card member">
- <button
- id="favori"
- class="btn btn-light position-absolute"
- :class="{
- add: !$favourites.list.includes(hash.uid),
- remove: $favourites.list.includes(hash.uid)
- }"
- @click="$favourites.toggleFavourite(hash.uid, $event)"></button>
<div class="card-body">
- <h2 class="card-title text-center mb-4">
- {{ hash.uid }}
- <BadgeStatus :membre="hash" />
- </h2>
+ <div class="uid d-flex align-items-center justify-content-between mb-4">
+ <h2 class="card-title text-center">
+ {{ hash.uid }}
+ <BadgeStatus :membre="hash" />
+ </h2>
+ <button
+ id="favori"
+ class="btn btn-light"
+ :class="{
+ add: !$favourites.list.includes(hash.uid),
+ remove: $favourites.list.includes(hash.uid)
+ }"
+ @click="$favourites.toggleFavourite(hash.uid, $event)"></button>
+ </div>
<BtnClipboard :textContent="hash.pubkey" />
<div class="table-responsive">
<table
@@ -141,9 +143,14 @@ export default {
</script>
<style lang="scss">
+.uid {
+ flex-direction: column;
+
+ @media (min-width: 576px) {
+ flex-direction: row;
+ }
+}
#favori {
- top: 1.25rem;
- left: 1.25rem;
background-color: var(--light);
background-size: 75%;
background-repeat: no-repeat;
diff --git a/components/navigation/Breadcrumb.vue b/components/navigation/Breadcrumb.vue
index c436112..c6a185b 100644
--- a/components/navigation/Breadcrumb.vue
+++ b/components/navigation/Breadcrumb.vue
@@ -1,6 +1,6 @@
<template>
<nav aria-label="Fil d'Ariane" class="breadcrumb-wrapper rounded">
- <ol class="breadcrumb m-0 p-0">
+ <ol class="breadcrumb m-0 p-0 d-none d-sm-flex">
<li
class="breadcrumb-item"
:class="{ active: item.active }"
diff --git a/layouts/default.vue b/layouts/default.vue
index 2822163..2b9c67d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -70,10 +70,13 @@ export default {
transition: margin 0.5s ease-in-out;
}
main {
- --paddingTop: 125px;
+ --paddingTop: 85px;
padding-top: var(--paddingTop);
position: relative;
+ @media (min-width: 576px) {
+ --paddingTop: 115px;
+ }
@media (min-width: 768px) {
--paddingTop: 85px;
}
--
GitLab