Skip to content

Commit

Permalink
Merge pull request #379 from LibraryOfCongress/update-transcription-ui
Browse files Browse the repository at this point in the history 
WIP: update asset transcription UI
  • Loading branch information
@rstorey
rstorey authored Oct 12, 2018
2 parents 889ad59 + e977cd3 commit b0302e1
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 285 deletions.
237 changes: 45 additions & 192 deletions concordia/static/css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@
--bg-loading: rgba(51, 51, 51, 0.5); /* #333333 */
--shadow-color: rgba(51, 51, 51, 0.8); /* #333333 */
--light-shadow-color: rgba(51, 51, 51, 0.4); /* #333333 */

/* Colors used to build complex interface widgets */
--control-bg-light: #efefef;
--control-bg-default: #d8d8d8;
--control-label-color: #333333;

--height-top-nav: 8.0625rem;
--height-main: calc(100vh - 8.0625rem); /* Subtract height of navbar */

Expand All @@ -37,10 +43,7 @@
}

body {
top: 0;
left: 0;
color: var(--text-color-primary);
overflow-x: hidden;
border-top: 0.25rem solid var(--primary-color);
background-color: var(--bg-offwhite);
}
Expand Down Expand Up @@ -271,10 +274,6 @@ p.hero-secondary.offwhite-text {
background-color: var(--primary-color);
}

main {
min-height: var(--height-main);
}

input {
color: var(--text-color-primary);
background-color: var(--bg-offwhite);
Expand All @@ -284,18 +283,6 @@ hr {
color: var(--bg-dark-gray);
}

.navbar {
padding: 0;
}

.navbar-toggler {
margin: 0;
}

.navbar-toggler-icon:focus {
outline: none;
}

.navbar-brand {
padding-top: 0;
padding-bottom: 0;
Expand Down Expand Up @@ -327,10 +314,6 @@ div.nav-secondary {
border-left: solid 0.0675 var(--bg-darkest-gray);
}

.border-bottom-artifacts {
border-bottom: solid 0.125rem var(--bg-divider);
}

.border-left-home-contribute {
border-left: solid 0.0675rem var(--bg-offwhite);
}
Expand Down Expand Up @@ -375,13 +358,6 @@ div.nav-secondary {
align-self: flex-end !important;
}

.padding-header {
padding-top: calc(
(28.125rem - 9.1875rem) / 2
); /* vertically center text and button */
padding-bottom: calc((28.125rem - 9.1875rem) / 2);
}

.margin-default,
.mxy-default {
margin: 2rem !important;
Expand Down Expand Up @@ -505,9 +481,6 @@ div.nav-secondary {

/* MD breakpoint and below */
@media (max-width: 991.98px) {
.border-bottom-artifacts {
border-bottom: solid 0px transparent;
}
.border-left-home-contribute {
border-left: solid 0px transparent;
}
Expand Down Expand Up @@ -617,80 +590,6 @@ div.nav-secondary {
}
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
padding-right: 0;
padding-left: 0;
}

.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
Expand Down Expand Up @@ -945,123 +844,77 @@ div.nav-secondary {
}

/*
* Contribute page CSS
*/
* Asset detail page
*
* This page wants to display as much as possible and so the entire page is a flex column
*/

.asset-image {
height: var(--height-contribute-image);
min-height: calc(100vh - 9.625rem);
border: 0px solid transparent;
body.view-transcriptions--asset-detail {
height: 100vh;
}

.contribute-box {
height: calc(100vh - (8.0625rem + 1.59375rem));
#contribute-main-content {
position: relative;
}

.contribute-box .dropdown-menu {
cursor: pointer;
#contribute-main-content h2 {
font-size: inherit;
}

.contribute-box .dropdown-menu.active {
color: var(--text-color-offwhite);
background: var(--primary-color);
#navigation-container {
background-color: var(--control-bg-light);
border: solid var(--control-bg-default) 1px;
border-bottom: unset;
}

.nav-pills .nav-link {
color: var(--text-color-offwhite);
border-radius: 1rem;
text-decoration: underline;
font-size: 0.875rem;
}

.nav-pills .nav-link.active {
color: var(--text-color-offwhite);
background-color: var(--primary-color);
text-decoration: none;
#contribute-container {
border: solid var(--control-bg-default) 1px;
}

#transcription-editor textarea {
resize: none;
}

#contact-button {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
#help-container {
display: flex;
justify-content: end;
align-items: center;
}

#help-container > * {
margin: 0.6rem;
}

.contribute-instructions {
#instruction-window {
position: absolute;
left: 0;
bottom: 0;
}
right: 0;
left: 0;

@keyframes instructions {
0% {
display: block;
opacity: 0;
color: rgba(38, 50, 56, 0);
}
25% {
width: 25%;
height: 25%;
opacity: 0.25;
}
50% {
width: 50%;
height: 50%;
opacity: 0.5;
}
75% {
width: 75%;
height: 75%;
opacity: 0.75;
}
90% {
color: rgba(38, 50, 56, 0.3);
}
100% {
width: 100%;
height: 100%;
opacity: 1;
color: rgba(38, 50, 56, 1);
}
}
z-index: 10;

.contribute-instructions.instruction-window {
border-top: 0.0675rem solid var(--bg-darkest-gray);
animation: instructions 0.5s linear;
background-color: rgba(250, 250, 250, 0.8);
border-top: 1pt solid var(--bg-darkest-gray);
transition: height 1s linear 0;
}

.contribute-instructions.instruction-window.collapse {
#instruction-window.collapse {
display: none;
position: absolute;
left: 0;
bottom: 2.375rem;
}

.contribute-instructions.instruction-window.collapse.show {
#instruction-window.collapse.show {
display: block;
height: 100%;
bottom: 2.375rem;
}

.instruction-window p {
margin-bottom: 0;
}

#instruction-button {
border-radius: 0;
}

#instruction-button:focus {
border-radius: 0;
box-shadow: none;
#instruction-window p {
max-width: 40em;
margin: auto;
}

/*
* tag-input
*/
* Tag input on the asset detail page
*/

#current-tags {
border: 0px solid #ccc;
border-radius: 0.25rem;
Expand Down
6 changes: 3 additions & 3 deletions concordia/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
{% endif %}
</head>

<body class="view-{{ VIEW_NAME_FOR_CSS }} section-{{ PATH_LEVEL_1|default:'homepage' }} environment-{{ CONCORDIA_ENVIRONMENT }}">
<body class="view-{{ VIEW_NAME_FOR_CSS }} section-{{ PATH_LEVEL_1|default:'homepage' }} environment-{{ CONCORDIA_ENVIRONMENT }} {% block extra_body_classes %}{% endblock %}">
<header>
<nav class="navbar navbar-expand-lg flex-row navbar-offwhite bg-offwhite justify-content-between align-items-end py-3 px-md-default pl-2">
<nav class="navbar navbar-expand-lg flex-row navbar-offwhite bg-offwhite justify-content-between align-items-end">
<div class="d-flex navbar-brand">
<a class="my-auto" href="https://www.loc.gov">
<img src="{% static 'img/LoC-logo.svg' %}" alt="Library of Congress logo"></a>
Expand Down Expand Up @@ -85,7 +85,7 @@ <h1 class="header-text align-self-end">
{% endif %}
</nav>
</header>
<main>
<main class="{% block extra_main_classes %}{% endblock %}">
{% block breadcrumbs-container %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-offwhite my-0">
Expand Down
Loading

0 comments on commit b0302e1

Please sign in to comment.