Skip to content

Commit

Permalink
Align UI elements on the item view page (#5469)
Browse files Browse the repository at this point in the history
  • Loading branch information
Dananji authored Nov 15, 2023
1 parent 4db6d0f commit 1f0a453
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 135 deletions.
8 changes: 4 additions & 4 deletions app/javascript/components/Ramp.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const Ramp = ({
<div className="ramp--rails-title">
{ <div className="object-title" dangerouslySetInnerHTML={{ __html: title.content }} /> }
</div>
<div className="ramp--rails-content">
<div className="ramp--rails-content">
<Col className="ramp-button-group-1">
{ timeline.canCreate &&
<button
Expand Down Expand Up @@ -200,14 +200,14 @@ const Ramp = ({
<Col>
<div dangerouslySetInnerHTML={{ __html: timeline.content}} />
</Col>
<Col md={12} lg={12} sm={12}>
<Col md={12} lg={12} sm={12} className="px-0">
<div className="collapse" id="addToPlaylistPanel">
<div className="card card-body" dangerouslySetInnerHTML={{ __html: playlist.tab }} />
</div>
</Col>
<Col md={12} lg={12} sm={12}>
<Col md={12} lg={12} sm={12} className="px-0">
<div className="collapse" id="shareResourcePanel">
<div className="card card-body share-tabs" dangerouslySetInnerHTML={{ __html: share.content }} />
<div className="share-tabs" dangerouslySetInnerHTML={{ __html: share.content }} />
</div>
</Col>
</Row>
Expand Down
123 changes: 62 additions & 61 deletions app/javascript/components/Ramp.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,15 @@
}

.ramp--all-components {
.iiif-player {
.ramp--structured-nav {
float: left;
width: 40%;
margin-top: 20px;
}
.ramp--transcript_nav {
float: right;
width: 60%;
margin-left: -20px;
margin-top: 20px;
}
.ramp--structured-nav {
margin-top: 20px;
max-width: initial;
}

// Left align the structure navigation component
.ramp--structured-nav>.ramp--structured-nav__list,
.ramp--structured-nav>.ramp--structured-nav__list>.ramp--structured-nav__list-item {
padding: 0;
}

.ramp--rails-title {
Expand All @@ -57,11 +54,13 @@
.ramp-button-group-1 {
display: flex;
justify-content: flex-start;
padding: 0;
}

.ramp-button-group-2 {
display: flex;
justify-content: flex-end;
padding: 0;
}
}

Expand Down Expand Up @@ -96,82 +95,83 @@
}

.nav.nav-tabs {
background-color:#fff;
border:1px solid #e2e7e9;
border-top-left-radius:.5rem;
border-top-right-radius:.5rem;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
background-color: #fff;
border: 1px solid #e2e7e9;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

.nav-item {
border:none;
background-color:transparent;
border-bottom:1px solid #e2e7e9;
color:#243142;
cursor:pointer;
-ms-flex-positive:1;
flex-grow:1;
line-height:1;
padding:1rem;
position:relative;
z-index:100;
border: none;
background-color: transparent;
border-bottom: 1px solid #e2e7e9;
color: #243142;
cursor: pointer;
-ms-flex-positive: 1;
flex-grow: 1;
line-height: 1;
padding: 1rem;
position: relative;
z-index: 100;
}
.nav-item:not(:first-child) {
border-left:1px solid #e2e7e9;
margin-left:-1px;
border-left: 1px solid #e2e7e9;
margin-left: -1px;
border-radius: 0;
}
.nav-item:hover {
background-color:#f8f9fa;
color:#0e1825;
background-color: #f8f9fa;
color: #0e1825;
}
.nav-item:hover:after {
background-color:#e2e7e9;
bottom:0;
content:"";
display:block;
height:.25rem;
left:0;
position:absolute;
width:100%;
background-color: #e2e7e9;
bottom: 0;
content: "";
display: block;
height: 0.25rem;
left: 0;
position: absolute;
width: 100%;
}
.nav-item:focus {
outline:.125rem solid #328bb8;
outline-offset:.125rem;
background-color:#edfafd;
outline:.125rem solid #80a590;
outline-offset: 0.125rem;
background-color: rgba(128, 165, 144, .3);
}
.nav-item:focus:not(:focus-visible) {
outline:none;
outline: none;
}
.nav-item[aria-selected=true] {
background-color:#f8f9fa;
background-color: #f8f9fa;
}
.nav-item[aria-selected=true]:after {
bottom:0;
background-color:#2a5459;
content:"";
display:block;
height:.25rem;
left:0;
position:absolute;
width:100%;
bottom: 0;
background-color: #2a5459;
content: "";
display: block;
height: 0.25rem;
left: 0;
position: absolute;
width: 100%;
}
}

.tab-pane {
padding:1rem;
border-bottom-left-radius:.5rem;
border-bottom-right-radius:.5rem;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
max-height: 75vh;
overflow: auto;
}
.tab-pane:focus {
outline:.125rem solid #006298;
outline-offset:-.125rem;
outline: 0.125rem solid #006298;
outline-offset: -0.125rem;
}
.tab-pane:focus:not(:focus-visible) {
outline:none;
outline: none;
}

/* Override Ramp styling */
Expand All @@ -188,6 +188,7 @@
max-height: 72vh;
display: flex;
flex-direction: column;
padding: 0;
}

.ramp--transcript_nav div.transcript_content {
Expand Down
6 changes: 3 additions & 3 deletions app/views/media_objects/_add_to_playlist.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Unless required by applicable law or agreed to in writing, software distributed
</div>
</div>

<div id="add-to-playlist-form-group" class="mb-4">
<div id="add-to-playlist-form-group">
<div class="form-check">
<label class="form-check-label" onclick="collapseMoreDetails()">
<input type="radio" name="post[playlistitem_scope]" id="playlistitem_scope_track" aria-label="playlist item current track">
Expand Down Expand Up @@ -67,7 +67,7 @@ Unless required by applicable law or agreed to in writing, software distributed
</div>
<div class="row" id="moreInfo">
<div class="col-12">
<div class="collapse mb-4" id="multiItemCheck" data-parent="#moreInfo">
<div class="collapse mb-4 mt-4" id="multiItemCheck" data-parent="#moreInfo">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="playlistitem_scope_structure">
Expand All @@ -77,7 +77,7 @@ Unless required by applicable law or agreed to in writing, software distributed
</div>
</div>
<div class="col-12">
<div class="collapse mx-4" id="moreDetails" data-parent="#moreInfo">
<div class="collapse mx-4 mt-4" id="moreDetails" data-parent="#moreInfo">
<div class="form-group">
<label for="playlist_item_title">Title</label>
<input type="text" name="playlist_item_title" id="playlist_item_title" class="form-control form-model" required>
Expand Down
26 changes: 11 additions & 15 deletions app/views/media_objects/_embed_resource.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,16 @@ Unless required by applicable law or agreed to in writing, software distributed
--- END LICENSE_HEADER BLOCK ---
%>
<% if section=='tab-content' %>

<div class="tab-pane" id="embed-tab">
<% if @media_object.cdl_enabled?%>
<p>This item cannot be embedded.</p>
<% elsif @currentStream.present? %>
<p class="muted">Copy the text below to embed this resource</p>
<textarea class="col-md-12" rows="3" id="embed-part" onClick="this.select();" readonly="readonly"><%= @currentStream.embed_code(MasterFile::EMBED_SIZE[:medium], { urlappend: '/embed' }) %></textarea>
<% else %>
<p class="muted"> <%= I18n.t('media_object.empty_share_link_notice') %> </p>
<% end %>
</div>

<div class="tab-pane" id="embed-tab">
<% if @media_object.cdl_enabled?%>
<p>This item cannot be embedded.</p>
<% elsif @currentStream.present? %>
<p class="muted">Copy the text below to embed this resource</p>
<textarea class="col-md-12" rows="3" id="embed-part" onClick="this.select();" readonly="readonly"><%= @currentStream.embed_code(MasterFile::EMBED_SIZE[:medium], { urlappend: '/embed' }) %></textarea>
<% else %>
<p class="muted"> <%= I18n.t('media_object.empty_share_link_notice') %> </p>
<% end %>
</div>
<% elsif section=='share-tabs' %>

<li class="nav-item"><a href="#embed-tab" data-toggle="tab" class="nav-link">Embed</a></li>

<a href="#embed-tab" data-toggle="tab" class="nav-link nav-item">Embed</a>
<% end %>
40 changes: 18 additions & 22 deletions app/views/media_objects/_lti_url.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,23 @@ Unless required by applicable law or agreed to in writing, software distributed
--- END LICENSE_HEADER BLOCK ---
%>
<% if section=='tab-content' %>

<div class="tab-pane" id="lti-tab">
<p class="muted">Copy the link below to share this resource via LTI</p>
<form role="form">
<div class="form-group">
<label for="ltilink-object">Item</label>
<input type="text" class="col-md-5 form-control" id="ltilink-object" value="<%= lti_share_url_for(@media_object) %>" onClick="this.select();" readonly="readonly">
</div>
<div class="form-group">
<label for="ltilink-section">Section</label>
<% if @currentStream.present? %>
<input type="text" class="col-md-5 form-control" id="ltilink-section" value="<%= lti_share_url_for(@currentStream) %>" onClick="this.select();" readonly="readonly">
<% else %>
<p class="muted"> <%= I18n.t('media_object.empty_share_section_permalink_notice') %> </p>
<% end %>
</div>
</form>
</div>

<div class="tab-pane" id="lti-tab">
<p class="muted">Copy the link below to share this resource via LTI</p>
<form role="form">
<div class="form-group">
<label for="ltilink-object">Item</label>
<input type="text" class="col-md-5 form-control" id="ltilink-object" value="<%= lti_share_url_for(@media_object) %>" onClick="this.select();" readonly="readonly">
</div>
<div class="form-group">
<label for="ltilink-section">Section</label>
<% if @currentStream.present? %>
<input type="text" class="col-md-5 form-control" id="ltilink-section" value="<%= lti_share_url_for(@currentStream) %>" onClick="this.select();" readonly="readonly">
<% else %>
<p class="muted"> <%= I18n.t('media_object.empty_share_section_permalink_notice') %> </p>
<% end %>
</div>
</form>
</div>
<% elsif section=='share-tabs' %>

<li><a class="nav-link" href="#lti-tab" data-toggle="tab">LTI URL</a></li>

<a class="nav-link nav-item" href="#lti-tab" data-toggle="tab">LTI URL</a>
<% end %>
23 changes: 16 additions & 7 deletions app/views/media_objects/_share.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ Unless required by applicable law or agreed to in writing, software distributed
%>

<div id="share-list">
<ul class="nav nav-tabs share-tabs">
<nav class="nav nav-tabs share-tabs">
<%= render_conditional_partials :share, section:'share-tabs' %>
</ul>
</nav>

<div class="tab-content">
<%= render_conditional_partials :share, section:'tab-content' %>
Expand Down Expand Up @@ -61,11 +61,20 @@ Unless required by applicable law or agreed to in writing, software distributed
$('#shareResourcePanel').on('show.bs.collapse', function (e) {
$('#addToPlaylistPanel').collapse('hide');
});
}
if(!$('.share-tabs li').first().hasClass('active')) {
$('.share-tabs li').first().toggleClass('active');
$('#share-list .tab-content .tab-pane').first().toggleClass('active');
}

if(!$('nav.share-tabs').first().hasClass('active')) {
$('nav.share-tabs').first().toggleClass('active');
$('.share-tabs a').first().attr('aria-selected', true);
$('#share-list .tab-content .tab-pane').first().toggleClass('active');
}

$('.share-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('.share-tabs a').attr('aria-selected', false);
$(this).attr('aria-selected', true);
});
}
}
setInterval(canvasIndexListener, 500);
});
Expand Down
40 changes: 18 additions & 22 deletions app/views/media_objects/_share_resource.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,23 @@ Unless required by applicable law or agreed to in writing, software distributed
--- END LICENSE_HEADER BLOCK ---
%>
<% if section=='tab-content' %>

<div class="tab-pane" id="link-tab">
<p class="muted">Copy the link below to share this resource</p>
<form role="form">
<div class="form-group">
<label for="link-object">Item</label>
<input type="text" class="col-md-12 form-control" id="link-object" value="<%= share_link_for(@media_object) %>" placeholder="<%= share_link_for(@media_object) %>" onClick="this.select();" readonly="readonly">
</div>
<div class="form-group">
<label for="share-link-section">Section</label>
<% if @currentStream.present? %>
<input type="text" class="col-md-12 form-control" id="share-link-section" value="<%= share_link_for(@currentStream) %>" placeholder="<%= share_link_for(@currentStream) %>" onClick="this.select();" readonly="readonly">
<% else %>
<p class="muted"> <%= I18n.t('media_object.empty_share_section_permalink_notice') %> </p>
<% end %>
</div>
</form>
</div>

<div class="tab-pane" id="link-tab">
<p class="muted">Copy the link below to share this resource</p>
<form role="form">
<div class="form-group">
<label for="link-object">Item</label>
<input type="text" class="col-md-12 form-control" id="link-object" value="<%= share_link_for(@media_object) %>" placeholder="<%= share_link_for(@media_object) %>" onClick="this.select();" readonly="readonly">
</div>
<div class="form-group">
<label for="share-link-section">Section</label>
<% if @currentStream.present? %>
<input type="text" class="col-md-12 form-control" id="share-link-section" value="<%= share_link_for(@currentStream) %>" placeholder="<%= share_link_for(@currentStream) %>" onClick="this.select();" readonly="readonly">
<% else %>
<p class="muted"> <%= I18n.t('media_object.empty_share_section_permalink_notice') %> </p>
<% end %>
</div>
</form>
</div>
<% elsif section=='share-tabs' %>

<li class="nav-item"><a href="#link-tab" data-toggle="tab" class="nav-link active">Share this resource</a></li>

<a href="#link-tab" data-toggle="tab" class="nav-item nav-link active">Share this resource</a>
<% end %>
Loading

0 comments on commit 1f0a453

Please sign in to comment.