Skip to content

Commit

Permalink
Merge pull request #789 from NASA-IMPACT/78-styling-for-notification-…
Browse files Browse the repository at this point in the history 
…modal-details-page

all modals styled according to figma
  • Loading branch information
@emshahh
emshahh authored May 31, 2024
2 parents 8e8e095 + 11d2716 commit 2a5a8ea
Show file tree
Hide file tree
Showing 5 changed files with 223 additions and 33 deletions.
100 changes: 99 additions & 1 deletion sde_indexing_helper/static/css/candidate_url_list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,54 @@ div > .nav {
width: 100%;
}

.doc-dropdown {
background: #A7BACD !important;
font-size: 15px;
font-weight: 500;
line-height: 17.58px;
color: #1F2935;
display: flex;
justify-content: space-between;
align-items: center;
text-transform: capitalize;
border-radius: 4px;
margin-bottom: 0;
}

.doc-dropdown-input {
flex-direction: column;
width: 100%;
}

.dropdown-item:hover {
background-color: #0066CA;
}

.doc-type-form {
width: 100%;
background: #15232E;
color: white;
border: 1px solid white;
padding: 24px 15px;
border-radius: 4px;
}

.doc-type-form a {
height: 24px;
padding: 0;
}

.document_type_form_select {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
height: 37px !important;
align-items: center;
display: flex;
padding-left: 10px !important;
border-radius: 1px !important;
}

.candidateUrlContainer {
background: #15232E;
padding: 40px 30px;
Expand Down Expand Up @@ -302,4 +350,54 @@ div.dt-buttons .btn.processing:after {
.headerDiv{
display: flex;
justify-content: space-between;
}
}

#match_pattern_input, #title_pattern_input {
background: #3F4A58;
border-radius: 4px;
}

.modal-body .bmd-label-static {
top: -20px !important;
}

.modal-header {
margin-bottom: 40px;
}

.form-label {
color: white;
display: flex;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.02em;
}

.asterik {
color: #C3001A;
}

.title_pattern-form-group {
margin-top: 40px;
}

.is-focused [class^='bmd-label']{
color:#0066CA;
}
.form-control{
color:white;
}

.form-control:focus{
color:white;
}

.is-focused .form-label{
background-image:linear-gradient(to top, #0066CA 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px);
color:#AAAAAA;
}

.dropdown-item:hover{
background-color: #0066CA !important;

}
26 changes: 25 additions & 1 deletion sde_indexing_helper/static/css/collection_detail.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,32 @@ color:black;
background-color:#050E19
}

.caption {
margin-bottom: 0;
text-align: center;
}

.rename-collection-caption {
padding-bottom: 14px;
}

#inputFieldId {
background-color: #3F4A58;
color: white;
border-radius: 4px;
border: none;
height: 29px;
}

.modal-header {
border-bottom: none;
}

.modal-content form {
margin-bottom: 0 !important;
.buttonsCol {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
}
67 changes: 66 additions & 1 deletion sde_indexing_helper/static/css/project.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,73 @@ body {
margin: 0 0 0 0 !important;
}

.modal-content {
background: #15232E;
border: 1px solid #A7BACD;
color: #FFFFFF;
padding: 32px 32px 42px 32px;
}

.modal-header {
padding: 0;
}

.modal-footer {
border-top: none;
padding: 0;
}

.modal-close {
color: #FFFFFF;
text-shadow: none;
}

.modal-close span {
padding: 0 8px !important;
border-radius: 15px !important;
background: #3F4A58 !important;
}

.modal-button-1 {
background: transparent !important;
color: #8697A8 !important;
border: 1px solid #FFFFFF !important;
}

.modal-button-2 {
background: #0066CA !important;
box-shadow: none !important;
margin-left: 10px;
}

.modal-button-1, .modal-button-2 {
font-size: 15px !important;
font-weight: 500 !important;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 100px;
}

.button-wrapper {
display: flex;
padding-top: 30px;
}

.modal-title {
font-size: 32px;
font-weight: 600;
letter-spacing: -0.03em;
padding-bottom: 12px;
}

.modal-body {
padding: 0;
}

.hideShowSubmitButton {
width: 110px;
box-shadow: 0px 8px 16px 0px #0037FA4D;

}
}
45 changes: 24 additions & 21 deletions sde_indexing_helper/templates/sde_collections/candidate_urls_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,21 +265,22 @@ <h3 class="whiteText candidateTitle">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="excludePatternModalLabel">Exclude Pattern Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form id="exclude_pattern_form">
<div class="modal-body">
<div class="form-group">
<label for="match_pattern_input">Match Pattern*</label>
<label for="match_pattern_input" class="form-label">Match Pattern <div class="asterik">*</div></label>
<input type="text" class="form-control" id="match_pattern_input" required name="match_pattern">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="button-wrapper">
<button type="button" class="btn btn-secondary modal-button-1" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary modal-button-2">Submit</button>
</div></div>
</form>
</div>
</div>
Expand All @@ -290,21 +291,22 @@ <h5 class="modal-title" id="excludePatternModalLabel">Exclude Pattern Form</h5>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="includePatternModalLabel">Include Pattern Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form id="include_pattern_form">
<div class="modal-body">
<div class="form-group">
<label for="match_pattern_input">Match Pattern*</label>
<label for="match_pattern_input" class="form-label">Match Pattern <div class="asterik">*</div></label>
<input type="text" class="form-control" id="match_pattern_input" required name="match_pattern">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="button-wrapper">
<button type="button" class="btn btn-secondary modal-button-1" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary modal-button-2">Submit</button>
</div></div>
</form>
</div>
</div>
Expand All @@ -315,25 +317,26 @@ <h5 class="modal-title" id="includePatternModalLabel">Include Pattern Form</h5>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="titlePatternModalLabel">Title Pattern Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form id="title_pattern_form">
<div class="modal-body">
<div class="form-group">
<label for="match_pattern_input">Match Pattern*</label>
<label for="match_pattern_input" class="form-label">Match Pattern <div class="asterik">*</div></label>
<input type="text" class="form-control" id="match_pattern_input" required name="match_pattern">
</div>
<div class="form-group">
<label for="title_pattern_input">Title Pattern*</label>
<div class="form-group title_pattern-form-group">
<label for="title_pattern_input" class="form-label">Title Pattern <div class="asterik">*</div></label>
<input type="text" class="form-control" id="title_pattern_input" required name="title_pattern">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="button-wrapper">
<button type="button" class="btn btn-secondary modal-button-1" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary modal-button-2">Submit</button>
</div> </div>
</form>
</div>
</div>
Expand All @@ -344,25 +347,25 @@ <h5 class="modal-title" id="titlePatternModalLabel">Title Pattern Form</h5>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="documentTypePatternModalLabel">Document Type Pattern Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form id="document_type_pattern_form">
<div class="modal-body">
<div class="form-group">
<label for="match_pattern_input">Match Pattern*</label>
<label for="match_pattern_input" class="form-label">Match Pattern <div class="asterik">*</div></label>
<input type="text" class="form-control" id="match_pattern_input" required name="match_pattern">
</div>
<div class="form-group">
<div class="input-group">
<input type="hidden" name="document_type_pattern" class="form-control"
aria-label="Document Type" id="doc_type_input_field">
<div class="input-group-append">
<div class="input-group-append doc-dropdown-input">
<button class="btn btn-secondary btn-block dropdown-toggle doc-dropdown" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select Document
Type</button>
<div class="dropdown-menu">
<div class="doc-type-form dropdown-menu">
<a class="dropdown-item document_type_form_select" value="1">Images</a>
<a class="dropdown-item document_type_form_select" value="2">Data</a>
<a class="dropdown-item document_type_form_select" value="3">Documentation</a>
Expand Down
18 changes: 9 additions & 9 deletions sde_indexing_helper/templates/sde_collections/collection_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ <h1 class="nameWrapper"><div class="collectionName" id="collectionName">{{ colle
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeDivisionModal">
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close" id="closeDivisionModal">
<span aria-hidden="true">&times;</span>
</button>
</div>
Expand All @@ -260,9 +260,9 @@ <h5 class="modal-title">Are you sure?</h5>
</div>
<div class="modal-footer">
<form id="divisionChangeModalForm">
<div>
<button type="submit" class="btn btn-secondary" id="cancelDivisionChange">No</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="makeDivisionChange">Yes</button>
<div class="button-wrapper">
<button type="submit" class="btn btn-secondary modal-button-1" id="cancelDivisionChange">No</button>
<button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="makeDivisionChange">Yes</button>
</div>
</form>
</div>
Expand All @@ -275,20 +275,20 @@ <h5 class="modal-title">Are you sure?</h5>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeTitleModal">
<button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close" id="closeTitleModal">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="modal-body">
<h5 class="modal-title">Rename Collection</h5>
<p class="caption" id="titleCaption"></p>
<p class="caption rename-collection-caption" id="titleCaption"></p>
</div>
<div class="modal-footer">
<form id="titleChangeModalForm">
<input type="text" name="inputFieldName" id="inputFieldId">
<div>
<button type="submit" class="btn btn-secondary" id="cancelTitleRename">Cancel</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="renameTitle">Rename</button>
<div class="button-wrapper">
<button type="submit" class="btn btn-secondary modal-button-1" id="cancelTitleRename">Cancel</button>
<button type="submit" class="btn btn-primary modal-button-2" data-dismiss="modal" id="renameTitle">Rename</button>
</div>
</form>
</div>
Expand Down

0 comments on commit 2a5a8ea

Please sign in to comment.