Skip to content

Commit c956607

Browse files
kimrutherfordkimrutherford
committed
Decrease panel width, font-size on small screens
Refs pombase/pombase-gocam#116
1 parent cd56626 commit c956607

1 file changed

Lines changed: 49 additions & 20 deletions

File tree

‎gocam_view/templates/gocam_view/index.html‎

Lines changed: 49 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,8 @@
4646
{% if full_or_widget == 'widget' %}
4747
font-size: 105%;
4848
{% endif %}
49-
{% if full_or_widget == 'full' %}
50-
font-size: 110%;
51-
{% endif %}
5249
}
5350
#panel-buttons, #actions {
54-
padding: 0.2em 0.5em;
5551
background: #f8f8f8a0;
5652
}
5753
#actions {
@@ -63,22 +59,61 @@
6359
#show-panel-button {
6460
display: none;
6561
}
66-
#zoom-in, #zoom-out {
67-
font-weight: bold;
68-
padding: 0 0.4em;
69-
margin-left: 0.3em;
70-
}
62+
7163
#cy-panel {
7264
margin-top: 2.5em;
7365
width: 0.1em;
7466
flex: 0 0 auto;
7567
{% if full_or_widget == 'widget' %}
7668
width: 18em;
7769
{% endif %}
70+
}
71+
72+
#zoom-in, #zoom-out {
73+
padding: 0 0.4em;
74+
margin-left: 0.3em;
75+
}
76+
@media (max-width: 999px) {
77+
#show-search img, #zoom-in img, #zoom-out img {
78+
width: 2vw;
79+
height: 2vw;
80+
}
81+
}
82+
@media (min-width: 1000px) {
83+
#show-search img, #zoom-in img, #zoom-out img {
84+
width: 16px;
85+
height: 16px;
86+
}
87+
}
88+
89+
90+
7891
{% if full_or_widget == 'full' %}
79-
width: 20em;
80-
{% endif %}
92+
@media (max-width: 999px) {
93+
#panel-buttons, #actions {
94+
padding: 0.05em 0.3em;
95+
}
96+
#panel-buttons button, #actions button {
97+
font-size: 2vw;
98+
}
99+
#cy-panel {
100+
width: 32vw;
101+
font-size: 2vw;
102+
}
81103
}
104+
@media (min-width: 1000px) {
105+
#panel-buttons, #actions {
106+
padding: 0.2em 0.5em;
107+
}
108+
#panel-buttons button, #actions button {
109+
font-size: 110%;
110+
}
111+
#cy-panel {
112+
width: 20em;
113+
}
114+
}
115+
{% endif %}
116+
82117
#search-input {
83118
font-size: 105%;
84119
}
@@ -744,11 +779,6 @@
744779
const searchBoxDiv = document.getElementById('search-box');
745780

746781
window.showCyPanel = function() {
747-
if (fullOrWidget == 'widget') {
748-
panelStyle.width = '18em';
749-
} else {
750-
panelStyle.width = '20em';
751-
}
752782
showPanelButton.style.display = 'none';
753783
hidePanelButton.style.display = 'inline-block';
754784
panelContent.style.display = 'block';
@@ -763,7 +793,6 @@
763793
};
764794

765795
window.hideCyPanel = function() {
766-
panelStyle.width = '0.1em';
767796
showPanelButton.style.display = 'inline-block';
768797
hidePanelButton.style.display = 'none';
769798
panelContent.style.display = 'none';
@@ -1083,23 +1112,23 @@
10831112
<div id="panel-buttons">
10841113
{% if full_or_widget == 'full' %}
10851114
<button id="show-search" title="Search" onclick="showSearch()">
1086-
<img width="16px" height="16px" src='data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg fill="%23000000" height="10mm" width="10mm" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g> <path d="M483.4,454.444l-121.3-121.4c28.7-35.2,46-80,46-128.9c0-112.5-91.5-204.1-204.1-204.1S0,91.644,0,204.144 s91.5,204,204.1,204c48.8,0,93.7-17.3,128.9-46l121.3,121.3c8.3,8.3,20.9,8.3,29.2,0S491.8,462.744,483.4,454.444z M40.7,204.144 c0-90.1,73.2-163.3,163.3-163.3s163.4,73.3,163.4,163.4s-73.3,163.4-163.4,163.4S40.7,294.244,40.7,204.144z"/> </g> </svg>'/>
1115+
<img src='data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg fill="%23000000" height="10mm" width="10mm" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g> <path d="M483.4,454.444l-121.3-121.4c28.7-35.2,46-80,46-128.9c0-112.5-91.5-204.1-204.1-204.1S0,91.644,0,204.144 s91.5,204,204.1,204c48.8,0,93.7-17.3,128.9-46l121.3,121.3c8.3,8.3,20.9,8.3,29.2,0S491.8,462.744,483.4,454.444z M40.7,204.144 c0-90.1,73.2-163.3,163.3-163.3s163.4,73.3,163.4,163.4s-73.3,163.4-163.4,163.4S40.7,294.244,40.7,204.144z"/> </g> </svg>'/>
10871116
</button>
10881117
{% endif %}
10891118
<button id="zoom-out" title="Zoom out" onclick="modelZoomOut()">
10901119
{% if full_or_widget == 'widget' %}
10911120
-
10921121
{% endif %}
10931122
{% if full_or_widget == 'full' %}
1094-
<img width="16px" height="16px" src='data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="10mm" height="10mm" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g transform="matrix(0.09090916,0,0,0.09090916,-2.2369372,-4.0168636)"> <rect style="fill:%23000000;stroke-width:0.264583" width="116.41666" height="31.75" x="31.75" y="95.25" ry="0.26052997" /> </g> </svg>'/>
1123+
<img src='data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="10mm" height="10mm" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g transform="matrix(0.09090916,0,0,0.09090916,-2.2369372,-4.0168636)"> <rect style="fill:%23000000;stroke-width:0.264583" width="116.41666" height="31.75" x="31.75" y="95.25" ry="0.26052997" /> </g> </svg>'/>
10951124
{% endif %}
10961125
</button>
10971126
<button id="zoom-in" title="Zoom in" onclick="modelZoomIn()">
10981127
{% if full_or_widget == 'widget' %}
10991128
+
11001129
{% endif %}
11011130
{% if full_or_widget == 'full' %}
1102-
<img width="16px" height="16px" src='data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="10mm" height="10mm" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g transform="matrix(0.09090916,0,0,0.09090916,-2.2369372,-4.0168636)"> <rect style="fill:%23000000;stroke-width:0.264583" width="116.41666" height="31.75" x="31.75" y="95.25" ry="0.26052997" /> <rect style="fill:%23000000;stroke-width:0.264583" width="31.749998" height="116.41666" x="74.083336" y="52.916668" ry="0" /> </g> </svg>'/>
1131+
<img src='data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="10mm" height="10mm" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g transform="matrix(0.09090916,0,0,0.09090916,-2.2369372,-4.0168636)"> <rect style="fill:%23000000;stroke-width:0.264583" width="116.41666" height="31.75" x="31.75" y="95.25" ry="0.26052997" /> <rect style="fill:%23000000;stroke-width:0.264583" width="31.749998" height="116.41666" x="74.083336" y="52.916668" ry="0" /> </g> </svg>'/>
11031132
{% endif %}
11041133
</button>
11051134
<button id="show-panel-button" onclick="showCyPanel()">Show side panel</button>

0 commit comments

Comments
 (0)