Skip to content

Commit

Permalink
Fixes to spacing of restricted content sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbpennel
bbpennel committed Dec 3, 2024
1 parent 0a6b4c9 commit e46e61e
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 62 deletions.
1 change: 0 additions & 1 deletion static/css/sass/cdr_ui_styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -713,7 +713,6 @@ table.dataTable {
.restricted-access {
border: 1px solid;
border-radius: 5px;
padding: 15px;

.button {
text-align: left;
Expand Down
71 changes: 11 additions & 60 deletions static/js/vue-cdr-access/src/components/full_record/downloadOptions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
<a @click.prevent="modal_open = true" class="download login-modal-link button action is-primary" href="#">{{ t('full_record.login') }}</a>
</div>
<div v-else-if="!isLoggedIn && restrictedFiles(recordData)" class="download">
<a class="button contact action" href="https://library.unc.edu/contact-us/?destination=wilson"><i class="fa fa-envelope"></i> {{ t('access.contact') }}</a>
<a class="button contact action is-primary" href="https://library.unc.edu/contact-us/?destination=wilson"><span class="icon"><i class="fa fa-envelope"></i></span><span>{{ t('access.contact') }}</span></a>
</div>
<div v-else-if="showNonImageDownload(recordData)" class="download">
<a class="download button action" :href="nonImageDownloadLink(recordData.id)"><i class="fa fa-download"></i> {{ t('full_record.download') }}</a>
<a class="download button action is-primary" :href="nonImageDownloadLink(recordData.id)"><span class="icon"><i class="fa fa-download"></i></span><span>{{ t('full_record.download') }}</span></a>
</div>
<div v-else-if="showImageDownload(recordData) && hasDownloadOptions(recordData)" class="dropdown download image-download-options">
<div class="dropdown download image-download-options">
<div class="dropdown-trigger">
<button @click="toggleDownloadOptions()" id="dropdown-menu-button" class="button download-images" aria-haspopup="true" aria-controls="dropdown-menu">
{{ t('full_record.download') }} <i class="fas fa-angle-down" aria-hidden="true"></i>
<button @click="toggleDownloadOptions()" id="dropdown-menu-button" class="button download-images is-primary" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ t('full_record.download') }}</span><span class="icon"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
</button>
</div>
<div class="dropdown-menu table-downloads" :class="{ 'show-list': download_options_open }" id="dropdown-menu" role="menu" :aria-hidden="!download_options_open">
Expand All @@ -30,7 +30,7 @@
</div>
</div>
<div v-else-if="showImageDownload(recordData) && !hasDownloadOptions(recordData)" class="download">
<a class="button is-primary contact action" href="https://library.unc.edu/contact-us/?destination=wilson"><i class="fa fa-envelope"></i> {{ t('access.contact') }}</a>
<a class="button is-primary contact action" href="https://library.unc.edu/contact-us/?destination=wilson"><span class="icon"><i class="fa fa-envelope"></i></span><span>{{ t('access.contact') }}</span></a>
</div>

<div v-if="!isLoggedIn && restrictedFiles(recordData) && hasGroupRole(recordData, 'canViewOriginals', 'authenticated')" class="modal" :class="{ 'is-active': modal_open }">
Expand All @@ -41,9 +41,9 @@
<button @click="modal_open = false" class="delete close" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="restricted-access downloads field is-grouped">
<a v-if="hasGroupRole(recordData, 'canViewOriginals', 'authenticated')" class="button login-link action is-primary" :href="loginUrl"><i class="fa fa-id-card"></i> {{ t('access.login') }}</a>
<a class="button contact action is-primary" href="https://library.unc.edu/contact-us/?destination=wilson"><i class="fa fa-envelope"></i> {{ t('access.contact') }}</a>
<div class="restricted-access downloads field is-grouped is-grouped-centered is-grouped-multiline py-4">
<a v-if="hasGroupRole(recordData, 'canViewOriginals', 'authenticated')" class="button login-link action is-primary" :href="loginUrl"><span class="icon"><i class="fa fa-id-card"></i></span><span>{{ t('access.login') }}</span></a>
<a class="button contact action is-primary" href="https://library.unc.edu/contact-us/?destination=wilson"><span class="icon"><i class="fa fa-envelope"></i></span><span>{{ t('access.contact') }}</span></a>
</div>
</section>
</div>
Expand Down Expand Up @@ -218,58 +218,9 @@ export default {
text-align: center;
}
.modal-card {
border-radius: 5px;
.modal-card-head {
align-items: flex-start;
}
.button {
display: flex;
font-size: 1rem !important;
padding: 0 10px !important;
height: 2rem;
}
}
.contact i,
.restricted-access i {
padding-right: 8px;
}
.restricted-access {
display: flex;
justify-content: center;
a {
display: flex;
flex-wrap: wrap;
margin: auto;
width: fit-content;
&:last-of-type {
margin-left: 15px;
}
}
}
@media screen and (max-width: 576px) {
.modal-card-body {
.restricted-access {
flex-direction: column;
align-items: center;
}
}
.item-actions {
.image-download-options {
.image-download-options .dropdown-menu {
left: 0;
}
}
@media screen and (min-width: 769px) {
.modal-card {
width: 680px;
}
}
</style>
2 changes: 1 addition & 1 deletion static/js/vue-cdr-access/src/components/full_record/objectActions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="column is-narrow action-btn item-actions">
<template v-if="recordData.resourceType !== 'Work'">
<div v-if="restrictedContent && !isLoggedIn" class="column is-narrow item-actions has-text-centered">
<div class="restricted-access">
<div class="restricted-access p-4">
<h2>{{ $t('full_record.restricted_content', { resource_type: recordData.briefObject.type.toLowerCase() }) }}</h2>
<download-options :record-data="recordData.briefObject" :t="$t"></download-options>
</div>
Expand Down

0 comments on commit e46e61e

Please sign in to comment.