Added style to recommended section. Added orbit bullet. For each title of the recommended added truncate horizontal with css. Added link for each recommended. Adjusted for responsive. Passed scss-lint.
This commit is contained in:
Alessandro Cuoghi
committed by
taitus
taitus
parent
ff6471982c
commit
a4e12ea801
@@ -18,6 +18,7 @@
|
||||
// 16. Flags
|
||||
// 17. Activity
|
||||
// 18. Banners
|
||||
// 19. Recommended Section Home
|
||||
//
|
||||
|
||||
// 01. Global styles
|
||||
@@ -319,6 +320,14 @@ a {
|
||||
background: $brand;
|
||||
}
|
||||
|
||||
.truncate-horizontal-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
-ms-text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// 02. Header
|
||||
// ----------
|
||||
|
||||
@@ -2128,3 +2137,95 @@ table {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 19. Recommended Section Home
|
||||
// -----------
|
||||
.section-recommended {
|
||||
padding-top: $line-height * 2;
|
||||
|
||||
h2 {
|
||||
margin-bottom: $line-height * 2;
|
||||
}
|
||||
|
||||
.debates,
|
||||
.proposals,
|
||||
.budget-investments {
|
||||
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
margin-bottom: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
.card-section {
|
||||
padding: $line-height;
|
||||
|
||||
p {
|
||||
font-size: rem-calc(15);
|
||||
}
|
||||
}
|
||||
|
||||
.orbit {
|
||||
height: 300px;
|
||||
|
||||
.orbit-wrapper {
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.orbit-bullets {
|
||||
@include orbit-bullets;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card .orbit .orbit-wrapper .truncate {
|
||||
background: image-url('truncate.png');
|
||||
background-repeat: repeat-x;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.debates-inner {
|
||||
border-top: 4px solid $debates;
|
||||
}
|
||||
|
||||
.proposals-inner {
|
||||
border-top: 4px solid $proposals;
|
||||
}
|
||||
|
||||
.budget-investments-inner {
|
||||
border-top: 4px solid $budget;
|
||||
}
|
||||
|
||||
.debates-inner,
|
||||
.proposals-inner,
|
||||
.budget-investments-inner {
|
||||
background: #fff;
|
||||
max-height: 350px;
|
||||
|
||||
@include breakpoint(small) {
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: $line-height;
|
||||
margin-bottom: 0;
|
||||
font-size: rem-calc(18);
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: rem-calc(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// Table of Contents
|
||||
//
|
||||
// 01. Logo
|
||||
// 02. Orbit bullets
|
||||
//
|
||||
|
||||
// 01. Logo
|
||||
@@ -30,3 +31,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//02. Orbit bullet
|
||||
@mixin orbit-bullets {
|
||||
@include disable-mouse-outline;
|
||||
position: relative;
|
||||
margin-top: $orbit-bullet-margin-top;
|
||||
margin-bottom: $orbit-bullet-margin-bottom;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
width: $orbit-bullet-diameter;
|
||||
height: $orbit-bullet-diameter;
|
||||
margin: $orbit-bullet-margin;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: $orbit-bullet-background;
|
||||
|
||||
&:hover {
|
||||
background-color: $orbit-bullet-background-active;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: $orbit-bullet-background-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,108 +1,108 @@
|
||||
<div class="row">
|
||||
<h2 class="text-center"><%= t("welcome.recommended.title") %></h2>
|
||||
<div class="highlight small-12 column section-recommended">
|
||||
<div class="row">
|
||||
<h2 class="text-center"><%= t("welcome.recommended.title") %></h2>
|
||||
|
||||
<div class="small-12 medium-4 column text-center debates">
|
||||
<div class="card small-11 small-centered debates">
|
||||
<div class="small-12 medium-4 column text-center debates">
|
||||
<div class="card small-centered debates-inner">
|
||||
|
||||
<h4><%= t("welcome.recommended.debates.title") %></h4>
|
||||
<h4><%= t("welcome.recommended.debates.title") %></h4>
|
||||
|
||||
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit="" data-use-m-u-i="false" data-resize="" id="" data-events="resize">
|
||||
<div class="orbit-wrapper">
|
||||
<div class="orbit" role="region" data-orbit data-use-m-u-i="false">
|
||||
<div class="orbit-wrapper">
|
||||
<ul class="orbit-container no-bullet" tabindex="0" >
|
||||
<% current_user.recommended_debates.each_with_index do |debate, index| %>
|
||||
<li class="orbit-slide <%= active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
|
||||
<div class="card">
|
||||
<div class="card-section">
|
||||
<%= link_to debate_path(debate) do %>
|
||||
<h5 class="truncate-horizontal-text"><%= debate.title %></h5>
|
||||
<% end %>
|
||||
<p><%= debate.description %></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="truncate"></div>
|
||||
</div>
|
||||
|
||||
<ul class="orbit-container no-bullet" tabindex="0" >
|
||||
<nav class="orbit-bullets">
|
||||
<% current_user.recommended_debates.each_with_index do |debate, index| %>
|
||||
|
||||
<li class="orbit-slide no-motionui <%= active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
|
||||
<div class="card">
|
||||
<div class="card-section">
|
||||
<h5><%= debate.title %></h5>
|
||||
<p><%= debate.description %></p>
|
||||
<!-- <div class="truncate"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<button data-slide="<%= index %>" class="<%= active_class(index) %>">
|
||||
<span class="show-for-sr">Second slide details.</span>
|
||||
</button>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="orbit-controls">
|
||||
<button class="orbit-previous" aria-label="previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀</button>
|
||||
<button class="orbit-next" aria-label="next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-4 column text-center proposals">
|
||||
<div class="card small-11 small-centered proposals">
|
||||
<div class="small-12 medium-4 column text-center proposals">
|
||||
<div class="card small-centered proposals-inner">
|
||||
|
||||
<h4><%= t("welcome.recommended.proposals.title") %></h4>
|
||||
<h4><%= t("welcome.recommended.proposals.title") %></h4>
|
||||
|
||||
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit="" data-use-m-u-i="false" data-resize="" id="" data-events="resize">
|
||||
<div class="orbit-wrapper">
|
||||
|
||||
<ul class="orbit-container no-bullet" tabindex="0" >
|
||||
<div class="orbit" role="region" data-orbit data-use-m-u-i="false">
|
||||
<div class="orbit-wrapper">
|
||||
<ul class="orbit-container no-bullet" tabindex="0" >
|
||||
<% current_user.recommended_proposals.each_with_index do |proposal, index| %>
|
||||
<li class="orbit-slide <%= active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
|
||||
<div class="card">
|
||||
<div class="card-section">
|
||||
<%= link_to proposal_path(proposal) do %>
|
||||
<h5><%= proposal.title %></h5>
|
||||
<% end %>
|
||||
<p><%= proposal.description %></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="truncate"></div>
|
||||
</div>
|
||||
<nav class="orbit-bullets">
|
||||
<% current_user.recommended_proposals.each_with_index do |proposal, index| %>
|
||||
|
||||
<li class="orbit-slide no-motionui <%= active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
|
||||
<div class="card">
|
||||
<div class="card-section">
|
||||
<h5><%= proposal.title %></h5>
|
||||
<p><%= proposal.description %></p>
|
||||
<!-- <div class="truncate"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<button data-slide="<%= index %>" class="<%= active_class(index) %>">
|
||||
<span class="show-for-sr">Second slide details.</span>
|
||||
</button>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="orbit-controls">
|
||||
<button class="orbit-previous" aria-label="previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀</button>
|
||||
<button class="orbit-next" aria-label="next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-4 column text-center budget-investments">
|
||||
<div class="card small-11 small-centered budget-investments">
|
||||
<div class="small-12 medium-4 column text-center budget-investments">
|
||||
<div class="card small-centered budget-investments-inner">
|
||||
|
||||
<h4><%= t("welcome.recommended.budget_investments.title") %></h4>
|
||||
<h4><%= t("welcome.recommended.budget_investments.title") %></h4>
|
||||
|
||||
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit="" data-use-m-u-i="false" data-resize="" id="" data-events="resize">
|
||||
<div class="orbit-wrapper">
|
||||
|
||||
<ul class="orbit-container no-bullet" tabindex="0" >
|
||||
<% current_user.recommended_budget_investments.each_with_index do |budget_investment, index| %>
|
||||
|
||||
<li class="orbit-slide no-motionui <%= active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
|
||||
<div class="card">
|
||||
<div class="card-section">
|
||||
<h5><%= budget_investment.title %></h5>
|
||||
<p><%= budget_investment.description %></p>
|
||||
<!-- <div class="truncate"></div> -->
|
||||
<div class="orbit" role="region" data-orbit data-use-m-u-i="false">
|
||||
<div class="orbit-wrapper">
|
||||
<ul class="orbit-container no-bullet" tabindex="0" >
|
||||
<% current_user.recommended_budget_investments.each_with_index do |budget_investment, index| %>
|
||||
<li class="orbit-slide <%= active_class(index) %>" data-slide="<%= index %>" style="position: relative; <%= slide_display(index) %>" aria-live="polite">
|
||||
<div class="card">
|
||||
<div class="card-section">
|
||||
<%= link_to budget_path(budget_investment) do %>
|
||||
<h5><%= budget_investment.title %></h5>
|
||||
<% end %>
|
||||
<p><%= budget_investment.description %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="truncate"></div>
|
||||
</div>
|
||||
<nav class="orbit-bullets">
|
||||
<% current_user.recommended_budget_investments.each_with_index do |budget_investment, index| %>
|
||||
<button data-slide="<%= index %>" class="<%= active_class(index) %>">
|
||||
<span class="show-for-sr">Second slide details.</span>
|
||||
</button>
|
||||
<% end %>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="orbit-controls">
|
||||
<button class="orbit-previous" aria-label="previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀</button>
|
||||
<button class="orbit-next" aria-label="next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -919,7 +919,7 @@ ActiveRecord::Schema.define(version: 20170719174326) do
|
||||
t.boolean "email_digest", default: true
|
||||
t.boolean "email_on_direct_message", default: true
|
||||
t.boolean "official_position_badge", default: false
|
||||
t.datetime "password_changed_at", default: '2017-06-22 11:21:30', null: false
|
||||
t.datetime "password_changed_at", default: '2017-07-21 18:09:48', null: false
|
||||
t.boolean "created_from_signature", default: false
|
||||
t.integer "failed_email_digests_count", default: 0
|
||||
t.text "former_users_data_log", default: ""
|
||||
|
||||
Reference in New Issue
Block a user