From 2661be13b6dc8d0b816a00c3ceb0743dab7dc204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 4 Nov 2019 14:14:19 +0100
Subject: [PATCH] styles for admins ok. Need padding ? + refactoring
---
src/page-admin-circles.pug | 25 +++++-
src/styles/base/form.scss | 4 +-
src/styles/layout/circle/circle-edit.scss | 92 ++++++++++++++++++++++-
3 files changed, 114 insertions(+), 7 deletions(-)
diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug
index 3f89324f..b28cd5fa 100644
--- a/src/page-admin-circles.pug
+++ b/src/page-admin-circles.pug
@@ -34,7 +34,25 @@
set-user-id-select="user"
)
- include templates/hd-user-avatar.pug
+
+
+
+ sib-widget(name='team-template-edit')
+ template
+ sib-display(
+ data-src='${await value.user}'
+ fields='account.picture, sup(name, groups), sub(profile.city)'
+
+ widget-account.picture='hd-user-avatar'
+
+ multiple-groups=''
+ widget-groups='hd-user-groups'
+ )
+
+
+
+
+
div.content-box__info
sib-link(class='circle-add-button button yellow-button', next='admin-circle-create') Create a new circle
@@ -46,9 +64,10 @@
div.cell Admins
div.cell Join
- sib-display.table-body(
+ //-fields="name, own(owner.account.picture, owner.name), buttons(members, button)"
+ sib-display.table-body.test(
data-src=`${endpoints.circles}`
- fields="name, own(owner.account.picture, owner.name), buttons(members, button)"
+ fields='name, own(owner.account.picture, sup(owner.name), sub(owner.username)), buttons(members)'
multiple-groups=""
widget-members="circle-admin-leave-button-template"
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index a3e09710..b3c3889e 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -38,7 +38,7 @@
flex-direction: column;
}
- sib-set-default {
+ /*sib-set-default {
clear: both;
display: flex;
flex-wrap: wrap;
@@ -48,7 +48,7 @@
float: left;
width: 50%;
}
- }
+ }*/
label {
display: flex;
diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss
index 32387f5a..ab7425db 100644
--- a/src/styles/layout/circle/circle-edit.scss
+++ b/src/styles/layout/circle/circle-edit.scss
@@ -26,6 +26,94 @@
}
}
+ .table-body.test>div>sib-display>div {
+ border-bottom: 1px solid $color-228-25-79;
+ display: flex;
+ justify-content: space-around;
+
+ >* {
+ flex: 1;
+ border-left: 1px solid $color-228-25-79;
+ text-align: center;
+ }
+
+ >*:last-child {
+ border-right: 1px solid $color-228-25-79;
+ }
+
+ >sib-display-value[name='name'] {
+ color: #3C3F57;
+ font-weight: 600;
+ }
+
+ >sib-set-default[name='own'] {
+ display: grid;
+ grid-column-gap: 1.6rem;
+ grid-template-columns: 7vh auto;
+ grid-template-rows: repeat(2, 5.2vh);
+
+ >[name$='account.picture'] {
+ align-items: center;
+ align-self: center;
+ background-color: $color-213-20-91;
+ border-radius: 50%;
+ display: flex;
+ grid-column: 1 / span 1;
+ grid-row: 1 / span 2;
+ height: 7vh;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ width: 7vh;
+
+ img {
+ background-color: white;
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ object {
+ height: 45%;
+ width: 45%;
+ }
+ }
+
+ >[name='sup'] {
+ align-self: end;
+ display: flex;
+ grid-column: 2 / span 1;
+ grid-row: 1 / span 1;
+ margin-bottom: 0.50rem;
+
+ [name$='name'] {
+ font-weight: 600;
+ margin-right: 1rem;
+ }
+ }
+
+ >[name='sub'] {
+ align-self: start;
+ grid-column: 2 / span 1;
+ grid-row: 2 / span 1;
+ margin-top: 0.50rem;
+
+ >[name$='username']:not(:empty) {
+ align-items: center;
+ display: flex;
+
+ &::before {
+ content: '@';
+
+ }
+ }
+ }
+ }
+ }
+
.table-body div team-template-edit {
display: flex;
justify-content: space-between;
@@ -74,7 +162,7 @@
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
- >[name='account.picture'] {
+ >[name$='account.picture'] {
align-items: center;
align-self: center;
background-color: $color-213-20-91;
@@ -111,7 +199,7 @@
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
- [name='name'] {
+ [name$='name'] {
font-weight: 600;
margin-right: 1rem;
}
--
GitLab