From fda9e3dd22eb5f0b04b6c7a49ca30e61037b3be4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 30 Oct 2019 11:47:39 +0100
Subject: [PATCH] circle-info buttons styled + form buttons refactored
---
src/page-circle-profile.pug | 64 ++++++++++----------
src/styles/base/form.scss | 35 +++++++----
src/styles/base/main.scss | 12 ++--
src/styles/layout/circle/circle-profile.scss | 9 +--
4 files changed, 66 insertions(+), 54 deletions(-)
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index cacfcdec..ffc0691b 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -6,7 +6,7 @@ sib-router(default-route='circle-profile')
include templates/hd-circle-team.pug
.content-box__info
sib-ac-checker.circle-edit-button(permission='acl:Write', bind-resources)
- sib-link(class="right-btn", next="circle-edit", bind-resources) Edit and add Members
+ sib-link(class="button blue-button", next="circle-edit", bind-resources) Edit and add Members
sib-display.block(
bind-resources
@@ -43,44 +43,46 @@ sib-router(default-route='circle-profile')
widget-team='circle-team-template'
)
- sib-ac-checker(permission='acl:Delete', bind-resources)
- sib-delete(
- bind-resources
- data-label='Delete Circle'
- class='right-btn reversed-btn'
- )
-
- sib-widget(name='join-leave-circle-button')
- template
- sib-ac-checker(
- permission="acl:Delete"
- data-src="${value['@id']}"
+ div.box-button
+ sib-ac-checker(permission='acl:Delete', bind-resources)
+ sib-delete(
+ bind-resources
+ data-label='Delete Circle'
+ class='button reversed-btn right-btn'
)
- sib-delete(
+
+ sib-widget(name='join-leave-circle-button')
+ template
+ sib-ac-checker(
+ permission="acl:Delete"
data-src="${value['@id']}"
- data-label='Leave circle'
)
+ sib-delete(
+ data-src="${value['@id']}"
+ data-label='Leave circle'
+ class='btn-margin-left'
+ )
- sib-display(
- bind-resources
- fields='members'
+ sib-display(
+ bind-resources
+ fields='members'
- multiple-members=''
- widget-members='join-leave-circle-button'
- )
+ multiple-members=''
+ widget-members='join-leave-circle-button'
+ )
- sib-form.block.team-form(
- bind-resources
- nested-field='members'
- fields='user'
- label-user=''
- range-user=`${endpoints.users}`
- widget-user='sib-form-dropdown'
+ sib-form.btn-margin-left(
+ bind-resources
+ nested-field='members'
+ fields='user'
+ label-user=''
+ range-user=`${endpoints.users}`
+ widget-user='sib-form-dropdown'
- set-user-id-select="user"
+ set-user-id-select="user"
- submit-button='Join Circle'
- )
+ submit-button='Join Circle'
+ )
#circle-edit(hidden)
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index 11632096..68e758be 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -2,10 +2,6 @@
&.with-form {
- sib-form {
- padding-bottom: 2.55rem;
- }
-
h1 {
color: $color-233-18-29;
font-weight: bold;
@@ -86,20 +82,30 @@
}
}
- input[type='submit'], .right-btn, sib-delete.right-btn button {
- background-color: $color-233-18-29;
- border: none;
+ .button,
+ input[type='submit'],
+ sib-delete button {
border-radius: 100em;
- color: $color-0-0-100;
cursor: pointer;
font-size: 1.4rem;
font-weight: bold;
- margin-left: auto;
- margin-top: 3.2rem;
padding: 0.55rem 2.5rem;
text-transform: uppercase;
}
+ input[type='submit'] {
+ background-color: $color-233-18-29;
+ border: none;
+ color: $color-0-0-100;
+ margin-left: auto;
+ margin-top: 3.2rem;
+ }
+
+ .blue-button {
+ background: $color-244-73-62;
+ color: white;
+ }
+
.reversed-btn, sib-delete.reversed-btn button {
background-color: transparent;
border: 1px solid #6157e5;
@@ -113,6 +119,10 @@
padding: 0;
}
+ .btn-margin-left {
+ margin-left: 2.2rem;
+ }
+
sib-form[set-user-id-select] {
input[type="submit"] {
@@ -163,9 +173,8 @@
>input[type='submit'] {
background-color: transparent;
- border: 1px solid #6157e5;
- color: #6157e5;
- font-size: 1.4rem;
+ border: 1px solid $color-244-73-62;
+ color: $color-244-73-62;
align-self: flex-end;
margin-bottom: 0.6rem;
margin-left: 4.2rem;
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 25b26f2f..1c21ee2e 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -107,13 +107,13 @@ sib-delete {
@include icon('close');
background-color: $color-233-18-29;
border: none;
- border-radius: 100em;
+ /*border-radius: 100em;*/
color: $color-0-0-100;
- cursor: pointer;
- font-size: 1.4rem;
- font-weight: bold;
- padding: 0.55rem 2.5rem;
- text-transform: uppercase;
+ /*cursor: pointer;*/
+ /*font-size: 1.4rem;*/
+ /*font-weight: bold;*/
+ /*padding: 0.55rem 2.5rem;*/
+ /*text-transform: uppercase;*/
&::before {
font-size: 1.6rem;
diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss
index 7d86fe9e..fbc30f43 100644
--- a/src/styles/layout/circle/circle-profile.scss
+++ b/src/styles/layout/circle/circle-profile.scss
@@ -19,13 +19,14 @@
.circle-edit-button {
align-self: flex-end;
position: absolute;
-
- >sib-link {
- background: $color-244-73-62;
- }
}
}
+ .box-button {
+ display: flex;
+ justify-content: flex-end;
+ }
+
.block {
>form { /* peut-être à mettre dans main.scss */
--
GitLab