Skip to content

Commit 1c62f17

Browse files
vincerubinettivincerubinetti
authored
Merge pull request monarch-initiative#448 from monarch-initiative/css
Make some css fixes
2 parents e6e775e + 675cc04 commit 1c62f17

File tree

6 files changed

+79
-97
lines changed

6 files changed

+79
-97
lines changed

Diff for: ‎src/App.vue

+1-8
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,10 @@ $fa-font-path: "~font-awesome/fonts" !default;
6363
width: 100%;
6464
display: flex;
6565
flex-direction: column;
66-
height: 100vh;
66+
min-height: 100vh;
6767
}
6868
6969
#app.page-wrapper .content-wrapper {
70-
padding: $navbar-height 0 0 0;
7170
flex: 1;
7271
margin: 0;
7372
background-color: #efefef;
@@ -87,21 +86,15 @@ $fa-font-path: "~font-awesome/fonts" !default;
8786
padding-bottom: 15px;
8887
}
8988
90-
div.vue-markdown {
91-
xmargin-top: $navbar-height;
92-
xborder: 5px solid cyan;
93-
}
9489
9590
div.container-fluid.monarch-home-view div.vue-markdown,
9691
div.container-fluid.monarch-view div.vue-markdown {
9792
margin-top: 0;
98-
xborder: 5px solid magenta;
9993
}
10094
10195
div.vue-markdown-plain {
10296
margin-top: $navbar-height;
10397
padding: 20px;
104-
xborder: 5px solid lightgreen;
10598
10699
pre {
107100
background-color: #f6f8fa;

Diff for: ‎src/components/DiseaseCarousel.vue

+9-7
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<p class="carousel-sub">
88
We are always updating our corpus of disease - phenotype associations to support current scientific understanding of disease.
99
</p><div v-if="activeCarousel.id" class="row carousel-row">
10-
<div class="col-6 disease-information">
10+
<div class="col-md disease-information">
1111
<h3 class="disease-name">
1212
<a :href="'/disease/' + activeCarousel.id">
1313
{{ activeCarousel.label }}
@@ -24,7 +24,7 @@
2424
<i class="fa fa-caret-right" />
2525
</b-button>
2626
</div>
27-
<div class="col-6 disease-phenotypes">
27+
<div class="col-md disease-phenotypes">
2828
<histo-pheno :active-item="activeCarousel" />
2929
</div>
3030
</div>
@@ -98,20 +98,23 @@ export default {
9898

9999
<style scoped>
100100
101+
.histo-pheno {
102+
height: 500px;
103+
min-height: unset !important;
104+
}
105+
101106
.disease-carousel {
102-
height: 425px;
107+
color: white;
103108
}
104109
105110
.disease-carousel .carousel-title {
106111
margin: 0;
107112
padding: 1rem 0 .5rem 0;
108113
text-align: center;
109-
color: white;
110114
text-transform: uppercase;
111115
}
112116
113117
.disease-carousel .carousel-sub {
114-
color: white;
115118
text-align: center;
116119
margin-bottom: .5rem;
117120
font-style: italic;
@@ -122,8 +125,7 @@ export default {
122125
}
123126
124127
.disease-carousel .disease-information {
125-
padding: .5rem 1rem 2.5rem 5.5rem;
126-
color: white;
128+
padding: 2rem;
127129
}
128130
129131
.disease-carousel .disease-information .disease-name {

Diff for: ‎src/components/Footer.vue

+12-5
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,6 @@ div.footer {
8080
background-color: $monarch-bg-color;
8181
box-shadow: 0px -3px 2px -1px rgba(0, 0, 0, 0.2), 0px 2px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
8282
83-
84-
.report {
85-
text-align: center;
86-
}
87-
8883
a {
8984
color: white;
9085
}
@@ -134,11 +129,23 @@ div.footer {
134129
padding: 10px;
135130
}
136131
132+
.report {
133+
text-align: center;
134+
}
135+
137136
.copyright {
138137
text-align: right;
139138
padding: 10px;
140139
}
141140
141+
$lg-width: map-get($grid-breakpoints, "lg");
142+
@media (max-width: $lg-width) {
143+
.version,
144+
.copyright {
145+
text-align: center;
146+
}
147+
}
148+
142149
.issue-btn {
143150
&:active {
144151
background-color: #b4c2cf !important;

Diff for: ‎src/components/Navbar.vue

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<b-navbar
33
id="monarchng-navbar"
4-
class="fixed-top"
4+
class="sticky-top"
55
fixed="true"
6-
toggleable="sm"
6+
toggleable="lg"
77
type="dark"
88
variant="info"
99
>
@@ -235,14 +235,9 @@ nav#monarchng-navbar.navbar .navbar-brand .branding-logo {
235235
}
236236
237237
nav#monarchng-navbar.navbar .navbar-collapse > .navbar-nav > .nav-item {
238-
xvertical-align:middle;
239238
margin-right: 15px;
240239
}
241240
242-
nav#monarchng-navbar.navbar .navbar-collapse > .navbar-nav > .nav-item > .nav-link {
243-
xpadding:0;
244-
xmargin:0;
245-
}
246241
247242
nav#monarchng-navbar.navbar .navbar-toggle {
248243
margin: 2px 35px 0 10px;
@@ -264,6 +259,20 @@ nav#monarchng-navbar.navbar .navbar-toggle .icon-bar {
264259
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
265260
}
266261
262+
.navbar-collapse.collapse.show {
263+
.navbar-nav {
264+
margin: 20px 0;
265+
}
266+
267+
li {
268+
margin: 5px 0;
269+
}
270+
}
271+
272+
.navbar-toggler.not-collapsed {
273+
margin-bottom: 20px;
274+
}
275+
267276
.nav-ac {
268277
margin:1px 25px 1px 0;
269278
height: 30px;

Diff for: ‎src/components/NodeCard.vue

-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,6 @@ $md-width: map-get($grid-breakpoints, "md");
112112
.card.node-card {
113113
min-width: $card-width;
114114
max-width: $card-width;
115-
xborder:5px solid red;
116115
}
117116
}
118117

Diff for: ‎src/components/home/HomePartners.md

+41-69
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,38 @@
22

33
##### The **Monarch Initiative** is a collaboration between:
44
<br>
5-
<div class="collab-wrapper">
6-
<div class="row">
7-
<div class="col-sm-4 offset-xl-3 col-xl-2 collab">
8-
<a href="https://oregonstate.edu/" target="__blank">
9-
<img src="../../assets/img/osu.png" alt="osu">
10-
</a>
11-
</div>
12-
<div class="col-sm-4 col-xl-2 collab">
13-
<a href="https://www.jax.org/" target="__blank">
14-
<img src="../../assets/img/jackson.png" alt="jax">
15-
</a>
16-
</div>
17-
<div class="col-sm-4 col-xl-2 collab">
18-
<a href="https://www.lbl.gov/" target="__blank">
19-
<img src="../../assets/img/lbnl.jpeg" alt="lbl">
20-
</a>
21-
</div>
5+
<div class="row">
6+
<div class="col-sm-6 col-md-4 collab">
7+
<a href="https://oregonstate.edu/" target="__blank">
8+
<img src="../../assets/img/osu.png" alt="osu">
9+
</a>
10+
</div>
11+
<div class="col-sm-6 col-md-4 collab">
12+
<a href="https://www.jax.org/" target="__blank">
13+
<img src="../../assets/img/jackson.png" alt="jax">
14+
</a>
15+
</div>
16+
<div class="col-sm-6 col-md-4 collab">
17+
<a href="https://www.lbl.gov/" target="__blank">
18+
<img src="../../assets/img/lbnl.jpeg" alt="lbl">
19+
</a>
20+
</div>
21+
<div class="col-sm-6 col-md-4 collab">
22+
<a href="https://medschool.cuanschutz.edu/ai" target="__blank">
23+
<img src="../../assets/img/health-ai.png" alt="Center for Health AI">
24+
</a>
2225
</div>
23-
<div class="row">
24-
<div class="col-sm-4 offset-xl-3 col-xl-2 collab">
25-
<a href="https://medschool.cuanschutz.edu/ai" target="__blank">
26-
<img src="../../assets/img/health-ai.png" alt="Center for Health AI">
27-
</a>
28-
</div>
29-
<div class="col-sm-4 col-xl-2 collab">
30-
<a href="https://www.qmul.ac.uk/smd/" target="__blank">
31-
<img src="../../assets/img/qmul.png" alt="qmul">
32-
</a>
33-
</div>
34-
<div class="col-sm-4 col-xl-2 collab">
35-
<a href="https://www.ebi.ac.uk/" target="__blank">
36-
<img src="../../assets/img/ebi.png" alt="ebi">
37-
</a>
38-
</div>
26+
<div class="col-sm-6 col-md-4 collab">
27+
<a href="https://www.qmul.ac.uk/smd/" target="__blank">
28+
<img src="../../assets/img/qmul.png" alt="qmul">
29+
</a>
3930
</div>
40-
<div class="offset-sm-5 col-sm-2 collab renci" style=";">
31+
<div class="col-sm-6 col-md-4 collab">
32+
<a href="https://www.ebi.ac.uk/" target="__blank">
33+
<img src="../../assets/img/ebi.png" alt="ebi">
34+
</a>
35+
</div>
36+
<div class="col-sm-6 col-md-4 collab">
4137
<a href="https://renci.org/" target="__blank">
4238
<img src="../../assets/img/renci.png" alt="renci">
4339
</a>
@@ -61,41 +57,17 @@ div.partners-section {
6157
background: $home-section-light-bg;
6258
text-align: center;
6359

64-
.collab-wrapper {
65-
66-
.collab img {
67-
max-width: 200px;
68-
}
69-
70-
.row:last-child {
71-
margin-bottom: 50px;
72-
margin-top: 50px;
73-
.collab:last-child {
74-
margin-top:-30px;
75-
}
76-
}
77-
78-
.row:nth-child(2) .collab:nth-child(2), .row:nth-child(2) .collab:last-child {
79-
margin-top: 50px;
80-
}
81-
82-
.row:nth-child(2) .collab:first-child {
83-
margin-top: 15px;
84-
max-height: 150px;
85-
}
86-
87-
}
88-
89-
.renci {
90-
margin-top: -60px;
91-
}
92-
93-
@media screen and (max-width: 580px){
94-
.renci {
95-
margin-top: 0;
96-
}
97-
}
98-
60+
img {
61+
max-width: 100%;
62+
max-height: 150px;
63+
}
64+
65+
.collab {
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
padding: 1rem;
70+
}
9971

10072
p {
10173
text-align: center;

0 commit comments

Comments
 (0)