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

Explore Collections bootstrap upgrade #3253

Merged
merged 4 commits into from
Jan 29, 2025
Merged

Explore Collections bootstrap upgrade #3253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
12890d2
Update Bootstrap/CSS for Explore Collections tabs
megwalt Jan 28, 2025
5ef845e
Add missing translation for breadcrumb
megwalt Jan 28, 2025
2b39787
Update Explore Collections masonry css and layout
megwalt Jan 28, 2025
cd8c258
Update pagination bootstrap
megwalt Jan 28, 2025
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
3 changes: 3 additions & 0 deletions app/assets/stylesheets/oregon_digital/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ input.link {
}
}
}
.btn-sm {
font-size: 14px;
}
.btn-lg {
padding: 16px 24px;
font-size: 18px;
Expand Down
58 changes: 31 additions & 27 deletions app/assets/stylesheets/oregon_digital/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,38 +339,42 @@ em {
div.pagination {
display: flex;
justify-content: center;
margin: 20px 0;
}
ul.pagination li {
&.active span {
background-color: $contrast-orange;
border: none;
color: $navy-blue;
}
&.next span,
&.next a,
&.previous span,
&.previous a {
background: none;
}
&.disabled {
span,
span:hover,
span:focus,
a,
a:hover,
a:focus {
color: $dark-grey;
ul.pagination {
align-items: center;
li {
&.active span.page-link {
background-color: $contrast-orange;
border: none;
color: $navy-blue;
}
&.next span,
&.next a,
&.previous span,
&.previous a {
background: none;
}
&.disabled {
span,
span:hover,
span:focus,
a,
a:hover,
a:focus {
color: $dark-grey;
}
}
}

a,
span {
background-color: $very-light-grey;
border: none;
margin: 0 .25em;
a,
span {
background-color: $very-light-grey;
border: none;
margin: 0 .25em;
padding: 6px 12px;
}
}
}

/* Gallery specific */
#content {
flex-direction: column;
Expand Down
11 changes: 2 additions & 9 deletions app/assets/stylesheets/oregon_digital/explore_collections/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ $triangle-size: $block-border-size*4;
width:$triangle-size*2;
height:$triangle-size*2;
overflow:hidden;
position:absolute;
position:relative;
visibility: hidden;
}
.notch::before,
Expand All @@ -89,12 +89,11 @@ $triangle-size: $block-border-size*4;

/* Notch on Bottom Middle */
.notch-xMiddle-yBottom {
bottom:-$triangle-size*2;
left:50%;
transform:rotate(90deg) translateY(50%);
}

@media (min-width: breakpoint-min(sm)) {
@media (min-width: breakpoint-min(md)) {
$block-border-size: 5px;
$triangle-size: $block-border-size*4;
.notch {
Expand All @@ -113,12 +112,6 @@ $triangle-size: $block-border-size*4;
left:-($triangle-size + $block-border-size*2);
}

/* Notch on Bottom Middle */
.notch-xMiddle-yBottom {
bottom:-$triangle-size*2;
// left:50%;
// transform:rotate(90deg) translateY(50%);
}
#explore-tabs a {
height: 55px;
width: 150px;
Expand Down
8 changes: 4 additions & 4 deletions app/assets/stylesheets/oregon_digital/explore_collections/_masonry_view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
border-top: $very-light-grey 2px solid;
width: calc(16.666% - 20px);

@media (max-width: breakpoint-min(md)) {
@media (max-width: breakpoint-min(xl)) {
& {
width: calc(25% - 30px);
}
}

@media (max-width: breakpoint-min(sm)) {
@media (max-width: breakpoint-min(md)) {
& {
width: calc(50% - 20px);
}
Expand All @@ -26,13 +26,13 @@
#masonry-gutter-sizer {
width: 20px;

@media (max-width: breakpoint-min(md)) {
@media (max-width: breakpoint-min(xl)) {
& {
width: 30px;
}
}

@media (max-width: breakpoint-min(sm)) {
@media (max-width: breakpoint-min(md)) {
& {
width: 40px;
}
Expand Down
8 changes: 4 additions & 4 deletions app/assets/stylesheets/oregon_digital/explore_collections/_showcase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ form#explore-collection-search {
#sortAndPerPage.explore-collections-per-page {
padding: 2em 0 1em 0;

@media (max-width: breakpoint-max(xs)) {
@media (max-width: breakpoint-max(sm)) {
& {
padding-left: 2em;
padding-right: 2em;
Expand All @@ -44,21 +44,21 @@ form#explore-collection-search {
font-weight: bold;
padding-bottom: 2em;

@media (max-width: breakpoint-max(sm)) {
@media (max-width: breakpoint-max(lg)) {
& {
display: block;
}
}
}

.explore-collections-search-widgets {
@media (max-width: breakpoint-max(sm)) {
@media (max-width: breakpoint-max(lg)) {
& {
float: left !important;
}
}

@media (min-width: breakpoint-max(sm)) {
@media (min-width: breakpoint-max(lg)) {
transform: 0 15%;
}

Expand Down
2 changes: 1 addition & 1 deletion app/controllers/oregon_digital/explore_collections_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ def build_breadcrumbs
all: 'all',
osu: 'osu',
uo: 'uo',
my: 'my collections'
my: 'my'
}.freeze

def search_service
Expand Down
2 changes: 1 addition & 1 deletion app/views/_masthead.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!-- OVERRIDDEN FROM HYRAX TO PUSH THROUGH THE CHANGES TO _user_util_links -->
<header class="header dropshadow-align" aria-label="header">
<nav id="masthead" class="navbar navbar-light navbar-expand-md fixed-top">
<nav id="masthead" class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">

<div class="navbar-header">
Expand Down
14 changes: 7 additions & 7 deletions app/views/oregon_digital/explore_collections/_explore_tabs.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,35 @@
<ul class='nav nav-pills visible-all-inline-block'>
<li class="<%= 'active' if tab == controller.class::TABS[:all] %>">
<div class="stacker-container">
<%= link_to 'All', all_collections_path, class: 'btn btn-outline' %>
<%= link_to 'All', all_collections_path, class: 'btn btn-sm btn-outline' %>
<div class="notch notch-xMiddle-yBottom"></div>
</div>
</li>
<li class="<%= 'active' if tab == controller.class::TABS[:osu] %>">
<div class="stacker-container">
<%= link_to osu_collections_path, class: 'btn btn-outline hidden-xs' do %>
<%= link_to osu_collections_path, class: 'btn btn-sm btn-outline d-none d-md-block' do %>
Oregon State <br> University
<% end %>
<%= link_to 'OSU', osu_collections_path, class: 'btn btn-outline visible-xs' %>
<%= link_to 'OSU', osu_collections_path, class: 'btn btn-sm btn-outline d-sm-block d-md-none' %>
<div class="notch notch-xMiddle-yBottom"></div>
</div>
</li>
<li class="<%= 'active' if tab == controller.class::TABS[:uo] %>">
<div class="stacker-container">
<%= link_to uo_collections_path, class: 'btn btn-outline hidden-xs' do %>
<%= link_to uo_collections_path, class: 'btn btn-sm btn-outline d-none d-md-block' do %>
University of <br> Oregon
<% end %>
<%= link_to 'UO', uo_collections_path, class: 'btn btn-outline visible-xs' %>
<%= link_to 'UO', uo_collections_path, class: 'btn btn-sm btn-outline d-sm-block d-md-none' %>
<div class="notch notch-xMiddle-yBottom"></div>
</div>
</li>
<% unless current_user.nil? %>
<li class="<%= 'active' if tab == controller.class::TABS[:my] %>">
<div class="stacker-container">
<%= link_to my_collections_path, class: 'btn btn-outline hidden-xs' do %>
<%= link_to my_collections_path, class: 'btn btn-sm btn-outline d-none d-md-block' do %>
My <br> Collections
<% end %>
<%= link_to 'My', my_collections_path, class: 'btn btn-outline visible-xs hidden-sm' %>
<%= link_to 'My', my_collections_path, class: 'btn btn-sm btn-outline d-sm-block d-md-none' %>
<div class="notch notch-xMiddle-yBottom"></div>
</div>
</li>
Expand Down
1 change: 0 additions & 1 deletion app/views/oregon_digital/explore_collections/_index_masonry.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<%= link_to(url_for_document(document)) do |body| %>
<span class="gradient-wrapper"><%= image_tag thumbnail_url(document), alt: "" %></span>
<p class="visible-all-inline h5">
</p>
<%= document.title_or_label.truncate(89).html_safe %>
<% if current_ability.admin? ? false : controller.institution_restricted?(document.id) %>
<span class="glyphicon glyphicon-lock"></span>
Expand Down