Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ajout du carousel sur la page projet (issue #104) #312

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

Ajout du carousel sur la page projet (issue #104) #312

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5624e33
effects on buttons with bulma + little fixes
Feb 20, 2019
4badeb4
add hover effects on project cards
Feb 20, 2019
715cf1b
add animations on links in cis-tabs
Feb 21, 2019
b6e49a9
adapt tabs behaviour to animate the navbar
Feb 22, 2019
70a9e79
add styling for links (primary, on primary, inline or independant) + …
Feb 22, 2019
56610a9
first steps to setup bulma-carousel on the project page
Feb 26, 2019
f99a656
fix for sass file
Mar 4, 2019
19db744
end setup of bulma-carousel on the project page
Mar 7, 2019
4957764
Merge branch 'develop' into c_dev_carousel_104
Mar 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions cis/app/frontend/scripts/components/CISProjectCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ export default {
box-shadow : $cis-discrete-shadow;
}

.proj-card:hover {
box-shadow : $cis-strong-shadow;
}

.proj-card-img {
border-radius : 3px 3px 0px 0px ;
}
Expand Down
7 changes: 1 addition & 6 deletions cis/app/frontend/scripts/components/screens/CISProjectScreen.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<p>{{project.projectPartners}}</p>
</div>

<a v-if="project.website" :href="project.website" target="_blank">Voir le site du projet</a>
<a v-if="project.website" :href="project.website" class="link-primary" target="_blank">Voir le site du projet</a>
</div>
</div>

Expand Down Expand Up @@ -171,11 +171,6 @@ a.back{
p{
margin-bottom: 1em;
}

a{
color: $cis-primary;
border-bottom: 1px solid $cis-primary;
}
}


Expand Down
3 changes: 2 additions & 1 deletion cis/app/frontend/styles/cis-misc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ $cis-search-bar-height: rem(65px);

$cis-navbar-font-size: rem(16px);

$cis-discrete-shadow: 0 3px 6px #D6D6D6;
$cis-discrete-shadow: 0 3px 6px #D6D6D6;
$cis-strong-shadow: 0 6px 12px #AAA;
113 changes: 103 additions & 10 deletions cis/app/frontend/styles/commons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,37 @@ p a.colored {
color: $cis-primary;
text-decoration: underline;
}
a.link-primary, a.link-on-primary {
display: inline-block;
margin-top: 1em;
text-indent: 0.2em;
padding-right: 0.2em;
}

a.link-primary {
color: $cis-primary;
border-bottom: 1px solid currentColor;
&:hover {
color:$cis-primary-invert;
background-color:$cis-primary;
}
}
a.link-on-primary {
color: $cis-primary-invert;
border-bottom: 1px solid currentColor;
&:hover {
color:$cis-primary;
background-color:$cis-primary-invert;
}
}
a.inline {
display: inline;
}

.disabled {
opacity: $disabled-opacity;
pointer-events: none;
}

.cis-tabs{
display: flex;
Expand All @@ -39,9 +70,10 @@ p a.colored {
padding-top: $cis-spacing_4;
margin-bottom: $cis-spacing_3;


li{
padding: 0 2em;

transition: .3s;
&:first-child{
padding-left: 0;
}
Expand All @@ -50,20 +82,86 @@ p a.colored {
border-right: 1px solid $cis-grey-light;
}

a{
color: inherit;
&.disabled{
color: $cis-grey-light;
}
}
}
}

// Animation: bar unter the text, filling itself when hovere
.navbar-item:not(.selected) a:not(.selected),
.cis-tabs li:not(.selected) a{
color: inherit;
position: relative;
text-decoration: none;
padding-bottom: 0.4em;
&:hover{
color: inherit;
}
&:before{
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: $cis-primary;
visibility: hidden;
-webkit-transform: scaleX(0);
-webkit-transform-origin: left center;
transform: scaleX(0);
transform-origin: left center;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
&:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}

#navbar-main .navbar-item.selected a,
.cis-tabs li.selected a{
.cis-tabs li.selected a,
html[lang="fr"] nav #navbar-main .navbar-item [lang="fr"],
html[lang="en"] nav #navbar-main .navbar-item [lang="en"] {
font-weight: bold;
padding-bottom: 0.3em;
border-bottom: 1px solid $cis-primary;
}

.carousel {
overflow-x: hidden;
overflow-y: visible;
height: 29em;
}

.carousel-item {
padding: 0 0.5em;
margin-right: 1em;
margin-left: 1em;
background-color: $cis-grey-background;
white-space: normal;
vertical-align: top;
display: inline-flex;
flex-direction: column;
align-items: center;
position: relative;


.text{
font-size: 0.9em;
line-height: 1.2em;
padding: 1em;
}

.text h1{
color: $cis-primary;
font-weight: bold;
margin-bottom: 1em;
}

}

.tagsinput {
border : none ;
Expand Down Expand Up @@ -120,11 +218,6 @@ footer h2{
margin-bottom: 0.5em;
}

footer h2 a {
color: currentColor;
text-decoration: underline;
}

footer .column h2:not(:first-of-type){
margin-top: 0.5em;
}
Expand Down
48 changes: 44 additions & 4 deletions cis/app/frontend/styles/custom-bulma.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,14 @@ $link-hover : $cis-primary;
$family-sans-serif : "Barlow", sans-serif ;
$family-primary : $family-sans-serif ;

$disabled-opacity: 0.7 ;
$button-disabled-opacity: $disabled-opacity ;

// Import the rest of Bulma at the end
@import "../node_modules/bulma/bulma.sass";
@import "../node_modules/bulma-checkradio/dist/css/bulma-checkradio.sass";
@import "../node_modules/bulma-carousel/dist/css/bulma-carousel.sass";

//@import "../node_modules/bulma-checkradio/dist/css/bulma-checkradio.sass";
//@import "../node_modules/bulma-extensions/bulma-carousel/dist/css/bulma-carousel.sass"
@import "./git-bulma-carousel-4.0.1.sass"; // temporary fix, seems that the npm package is not up-to-date?
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

à vérifier donc

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pe faire une issue à ce propos si ce n'est pas déjà fait du coup ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fait (#317)


// BULMA OVERRIDE

Expand All @@ -41,4 +43,42 @@ form .control{

.is-checkradio[type="checkbox"] + label{
font-size: $cis-navbar-font-size
}
}

// Bulma default behaviour darkens the button, doesn't fit for CIS
.button.is-primary:hover{
background-color:$primary-invert;
color:$primary;
border-color:$primary;
}
// Bulma default has a transparent background, causing the button
// to become invisible on a purple background
.button.is-primary.is-outlined{
background-color:$primary-invert;
}
.button.is-primary.is-outlined:hover{
border-color:$primary-invert;
}

// BULMA-CAROUSEL OVERRIDE
.slider-navigation-previous, .slider-navigation-next {
top: unset !important;
margin: 1em;

&:hover {
box-shadow : $cis-strong-shadow;
}

}
.slider:focus {
outline: none !important;
}

.slider-navigation-previous {
background-image: url('../icons/icon_chevron2_violet.svg');
left: calc( 50% + (-4em)); // To ensure correct spacing and alignment on various screen sizes; avoid buttons to overflow
}
.slider-navigation-next {
background-image: url('../icons/icon_chevron1_violet.svg');
right: calc( 50% + (-4em)); // Same as above
}
140 changes: 140 additions & 0 deletions cis/app/frontend/styles/git-bulma-carousel-4.0.1.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
.slider
position: relative
width: 100%
// overflow: hidden
.slider-container
display: flex
flex-wrap: nowrap
flex-direction: row
overflow: hidden
transform: translate3d(0, 0, 0)
min-height: 100%
&.is-vertical
flex-direction: column
.slider-item
flex: none
.image
&.is-covered
img
object-fit: cover
object-position: center center
height: 100%
width: 100%
// Responsive embedded objects
.video-container
height: 0
padding-bottom: 0
padding-top: 56.25% // ratio 16:9
margin: 0
position: relative
&.is-1by1,
&.is-square
padding-top: 100%
&.is-4by3
padding-top: 75%
&.is-21by9
padding-top: 42.857143%
& iframe,
& object,
& embed
position: absolute
top: 0
left: 0
width: 100% !important
height: 100% !important


.slider-navigation-previous,
.slider-navigation-next
position: absolute
width: 42px
height: 42px
background: white url('../images/left.svg') center center no-repeat
background-size: 20px 20px
border: 1px solid white
border-radius: 25091983px
box-shadow: 0 2px 5px #3232321a
top: 50%
margin-top: -20px
left: 0px
cursor: pointer
transition: transform .3s, opacity .3s
&:hover
transform: scale(1.2)
&.is-hidden
display: none
opacity: 0
.slider-navigation-next
left: auto
right: 0px
background: white url('../images/right.svg') center center no-repeat
background-size: 20px 20px

.slider-pagination
display: none
justify-content: center
align-items: center
position: absolute
bottom: 0
left: 0
right: 0
padding: .5rem 1rem
text-align: center
.slider-page
background: white
width: 10px
height: 10px
border-radius: 25091983px
display: inline-block
margin: 0 3px
box-shadow: 0 2px 5px #3232321a
transition: transform .3s
cursor: pointer
&.is-active,
&:hover
transform: scale(1.4)

@media screen and (min-width: 800px)
display: flex


// Hero Carousel
=hero-carousel
position: absolute
top: 0
left: 0
bottom: 0
right: 0
height: auto
border: none
margin: auto
padding: 0
z-index: 0

.hero
&.has-carousel
position: relative
+ .hero-body,
+ .hero-head,
+ .hero-footer
z-index: 10
overflow: hidden
.hero-carousel
+hero-carousel
.slider
width: 100%
max-width: 100%
overflow: hidden
height: 100% !important
max-height: 100%
z-index: 0
.has-background
max-height: 100%
.is-background
object-fit: cover
object-position: center center
height: 100%
width: 100%
.hero-body
margin: 0 3rem
z-index: 10
Loading