Skip to content

Commit

Permalink
Fix the problems in the design of the browse page and make it responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bilelkihal @syphax-bouazzouni
Bilelkihal authored and syphax-bouazzouni committed Apr 19, 2023
1 parent f5b8a65 commit ceeedb1
Show file tree
Hide file tree
Showing 3 changed files with 242 additions and 507 deletions.
227 changes: 172 additions & 55 deletions app/assets/stylesheets/browse.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,44 @@
margin: unset;
}


a{
text-decoration: none !important;
}
.browse-center{
display: flex;
justify-content: center;
margin: 50px 0;
}
.browse-title{
font-size: 18px;
font-size: 22px;
font-weight: 700;
}

.browse-submit-new-ontology-and-you-are-admin-container{
display: flex;
margin-bottom: 20px;

}
.browse-you-are-admin{
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #DFDFDF;
border-radius: 5px;
padding: 20px;
margin-left: 180px
}
.browse-you-are-admin h3{
font-size: 20px;
font-weight: 600;

}
.browse-you-are-admin div{
display: flex;

align-items: center;

}
.browse-you-are-admin div p{
margin-left: 20px;
}
.browse-upload-ontology-button{
margin: 20px 0;
display: flex;
Expand Down Expand Up @@ -67,6 +92,7 @@ a{

.browse-sub-container{
display: flex;
margin-top: 90px;
}
.browse-first-row{
width: 300px;
Expand Down Expand Up @@ -132,7 +158,7 @@ a{
.browse-ontology-cards{
display: grid;
grid-template-columns: 113px 113px;
grid-template-rows: 78px 78px;
grid-template-rows: min-content;
grid-column-gap: 15px;
grid-row-gap: 15px;
direction: rtl;
Expand Down Expand Up @@ -167,6 +193,7 @@ a{
font-weight: 600;
font-size: 16px;
}

.browse-search-bar{
display: flex;

Expand All @@ -175,12 +202,12 @@ a{
border: none;
border-radius: 14px;
width: 100%;
box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
box-shadow: rgba(100, 100, 111, 0.08) 0px 7px 29px 0px;
padding: 20px 20px;
margin-bottom: 20px;
font-size: 16px;
position: absolute;
width: 972px;
width: 1165px;
z-index: 1;

}
Expand Down Expand Up @@ -209,13 +236,13 @@ a{

.browse-search-bar .browse-format-filter{
position: absolute;
margin-left: 526px;
margin-left: 719px;
z-index: 2;
width: 150px;
}
.browse-search-bar .browse-sort-by-filter{
position: absolute;
margin-left: 676px;
margin-left: 869px;
z-index: 2;
width: 296px;
border-radius: 0 14px 14px 0;
Expand Down Expand Up @@ -261,55 +288,145 @@ a{
cursor: pointer;
}

.browse-ontology-title-bar{
display: flex;
align-items: center;
}
.browse-ontology-deprecated{
background-color: #EB433521;
color: #EB4335;
padding: 10px;
font-size: 14px;
border-radius: 8px;
margin-left: 15px;
margin-right: 15px;
font-weight: 500;
}
.browse-ontology-view{
background-color: var(--light-color);
color: var(--primary-color);
padding: 10px;
font-size: 14px;
border-radius: 8px;
margin-left: 15px;
margin-right: 15px;
font-weight: 500;
}

.browse-switch-filter{
display:flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.browse-switch-filter p{
font-size: 16px;
color: #666666;
}



/* Toggle switch css */
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
.browse-ontology-title-bar{
display: flex;
align-items: center;
}
input:checked + .slider {
background-color: var(--primary-color);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--primary-color);
.browse-ontology-deprecated{
background-color: #EB433521;
color: #EB4335;
padding: 10px;
font-size: 14px;
border-radius: 8px;
margin-left: 15px;
font-weight: 500;
}
.browse-ontology-view{
background-color: var(--light-color);
color: var(--primary-color);
padding: 10px;
font-size: 14px;
border-radius: 8px;
margin-left: 15px;
font-weight: 500;
}




@media only screen and (max-width: 1250px) {
.browse-first-row{
width: 24vw;
margin-right: 20px;
}

.browse-second-row{
width: 68vw;
}
.browse-search-bar input{
width: 94vw;
}
.browse-search-bar .browse-format-filter{
margin-left: 50%
}
.browse-search-bar .browse-sort-by-filter{
margin-left:65%
}

}
input:checked + .slider:before {
-webkit-transform: translateX(19px);
-ms-transform: translateX(19px);
transform: translateX(19px);
@media only screen and (max-width: 1005px) {
.browse-sub-container{
display: block;
}
.browse-second-row{
width: 94vw;
}
.browse-first-row{
width: 94vw;
}
.browse-search-bar input{
position: static ;
margin-bottom: 1vw;
}
.browse-search-bar .browse-format-filter{
margin-left: 0;
position: static;
border-radius: 14px;
width:46.5vw;
box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
margin-right: 1vw;
}
.browse-search-bar .browse-sort-by-filter{
margin-left: 0;
position: static;
border-radius: 14px;
width:46vw;
box-shadow: rgba(100, 100, 111, 0.1) 0px 7px 29px 0px;
}

.browse-sub-container{
margin-top: 20px;
}
.browse-center{
margin-left: 20px;
}
}
.account-page-subscribe-button{

@media only screen and (max-width: 893px){
.browse-ontology-container{
display: block;
}
.browse-ontology-description{
width: 100%;
}
.browse-ontology-cards{
direction:ltr;
margin-top: 20px;
}
.browse-ontology-deprecated{
margin-right: 0;
}
.browse-ontology-view{
margin-right: 0;
}

}

Loading

0 comments on commit ceeedb1

Please sign in to comment.