Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adapt style.css for mobile devices #1425

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Adapt style.css for mobile devices #1425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f03400
Add differentiation between mobile Devices and desktop in style.css.
fnkbsi Mar 28, 2024
7210125
Merge branch 'steve-community:master' into styleMobileDevices
fnkbsi Apr 3, 2024
37f8059
Merge branch 'steve-community:master' into styleMobileDevices
fnkbsi Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/main/resources/webapp/WEB-INF/views/00-header.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,10 @@
<%@ include file="00-context.jsp" %>

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="${ctxPath}/static/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="${ctxPath}/static/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="${ctxPath}/static/css/style.css">
Expand All @@ -44,7 +46,7 @@
<div class="main">
<div class="top-banner">
<div class="container">
<a href="${ctxPath}/manager/home"><img src="${ctxPath}/static/images/logo2.png" height="80"></a>
<a href="${ctxPath}/manager/home"><img src="${ctxPath}/static/images/logo2.png" alt="Steve-Logo" height="80"></a>
</div>
</div>
<div class="top-menu">
Expand Down
4 changes: 2 additions & 2 deletions src/main/resources/webapp/WEB-INF/views/data-man/00-charging-profile.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
<th>Power Limit (in Charging Rate Unit selected above)</th>
<th>Number Phases</th>
<th>
<input type="button" id="addRow" value="Add Period">
<input type="button" id="addRow" class="btnScheduleRow" value="Add Period">
</th>
</tr>
</thead>
Expand All @@ -79,7 +79,7 @@
<td><form:input path="schedulePeriodMap[${schedulePeriodMap.key}].startPeriodInSeconds"/></td>
<td><form:input path="schedulePeriodMap[${schedulePeriodMap.key}].powerLimit"/></td>
<td><form:input path="schedulePeriodMap[${schedulePeriodMap.key}].numberPhases" placeholder="if empty, 3 will be assumed"/></td>
<td><input type="button" class="removeRow" value="Delete"></td>
<td><input type="button" id="removeRow" class="btnScheduleRow" value="Delete"></td>
</tr>
</c:forEach>
</tbody>
Expand Down
2 changes: 2 additions & 0 deletions src/main/resources/webapp/WEB-INF/views/signin.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="${ctxPath}/static/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="${ctxPath}/static/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="${ctxPath}/static/css/style.css">
Expand Down
2 changes: 1 addition & 1 deletion src/main/resources/webapp/WEB-INF/views/snippets/schedulePeriodsTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// https://stackoverflow.com/a/14533243
$('#periodsTable').on('click', '.removeRow', function() {
$('#periodsTable').on('click', '#removeRow', function() {
$(this).closest("tr").remove();
});

Expand Down
176 changes: 143 additions & 33 deletions src/main/resources/webapp/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@ body {
padding: 0;
margin: 0;
}

/* For mobile phones: */
section {
margin-bottom: 12px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAytpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEI2QkFDMDQ3MDA1MTFFMzhFRTdFMUM3MjQzQjM3QzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEI2QkFDMDM3MDA1MTFFMzhFRTdFMUM3MjQzQjM3QzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5kaWQ6MTczM2IzZGQtYTIxNS00MDk4LThhM2EtYzE1MzkyZGUzZmQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3MzNiM2RkLWEyMTUtNDA5OC04YTNhLWMxNTM5MmRlM2ZkMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ptw6u3kAAAAPSURBVHjaYjhz5gxAgAEABMwCZTQYvMQAAAAASUVORK5CYII=') repeat-x 50% 50%;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAytpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEI2QkFDMDQ3MDA1MTFFMzhFRTdFMUM3MjQzQjM3QzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEI2QkFDMDM3MDA1MTFFMzhFRTdFMUM3MjQzQjM3QzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5kaWQ6MTczM2IzZGQtYTIxNS00MDk4LThhM2EtYzE1MzkyZGUzZmQwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3MzNiM2RkLWEyMTUtNDA5OC04YTNhLWMxNTM5MmRlM2ZkMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ptw6u3kAAAAPSURBVHjaYjhz5gxAgAEABMwCZTQYvMQAAAAASUVORK5CYII=') repeat-x 50% 50%;
}
section span { color:#5c5c5c; background:#fff; padding-right:10px; font-family:DroidSerif; font-size: 14px; font-weight: normal;}
ul hr { color: #CCC; background: #CCC; height: 1px; border: 0;}
Expand Down Expand Up @@ -47,6 +49,10 @@ table.res th {
padding: 5px;
background: #fff;
border-bottom: double #CCC;
writing-mode: vertical-rl;
transform: rotate(180deg);
max-height: 150px;
min-height: 25px;
}
table.res th[data-sort] {
cursor:pointer;
Expand All @@ -62,6 +68,8 @@ table.res td {
text-align: center;
width: auto;
word-wrap: break-word;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/*** Table for charge point details ***/
table.cpd {
Expand Down Expand Up @@ -96,7 +104,7 @@ select {
outline: none;
border: 1px solid #CCC;
border-radius: 0;
-webkit-border-radius: 0;
-webkit-border-radius: 0;
}
select option { font-size: 12px; }
input[type="text"], input[type="number"], input[type="password"], input[type="text"].dateTimePicker{
Expand All @@ -112,7 +120,7 @@ input[type="text"], input[type="number"], input[type="password"], input[type="te

input[type="button"] {
margin: 0 0 5px 5px;
width: 100px;
width: 100px;
font-size:12px;
height: 25px;
-moz-border-radius:3px;
Expand Down Expand Up @@ -145,29 +153,40 @@ input[type="button"]:active, input[type="submit"]:active {
position:relative;
top:1px;
}

input[type=button].btnScheduleRow {
width: 25px;
min-height: 100px;
}

input[type="submit"] {
min-width: 100px;
font-size: 12px;
background: #397079;
color: #fff;
cursor: pointer;
cursor: pointer;
height: 25px;
border: 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 5px;
}
input[type="submit"]:hover {
background:#29575f;
}
input[type="submit"].blueSubmit {
background:#397ac2;
min-width: 25px;
min-height: 80px;
}
input[type="submit"].blueSubmit:hover {
background:#1e63b0;
}
input[type="submit"].redSubmit {
background:#c14848;
min-width: 25px;
min-height: 80px;
}
input[type="submit"].redSubmit:hover {
background:#af3232;
Expand All @@ -191,6 +210,7 @@ ul.navigation {
margin:0;
position:relative;
float:right;
padding: 0;
}
ul.navigation li {
display:inline;
Expand All @@ -203,7 +223,7 @@ ul.navigation li {
ul.navigation li a {
padding-left:10px;
padding-right:10px;
line-height: 35px;
line-height: 30px;
text-decoration:none;
display:inline-block;
cursor: pointer;
Expand All @@ -216,13 +236,13 @@ ul.navigation li:hover > ul {
}
ul.navigation ul {
list-style: none;
margin: 0;
padding: 0;
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
text-align: center;
margin: 0;
padding: 0;
visibility:hidden;
opacity:0;
position: absolute;
z-index: 99999;
text-align: center;
}
ul.navigation ul li {
background:#000;
Expand All @@ -231,17 +251,18 @@ ul.navigation ul li {
ul.navigation ul li a {
text-decoration:none;
display:inline-block;
width:100%;
padding: 0;
width:100%;
padding: 0;
}
/*************** fin ***************/
.left-menu {
float: left;
width: 230px;
height: 100%;
width: 25%;
max-height: calc(100vh - 150px); /* 140px = topbanner: 80px, topmenue: 60px */
margin: 0;
padding: 0;
list-style-type: none;
overflow: auto;
}
.left-menu ul {
list-style: none;
Expand All @@ -253,7 +274,7 @@ ul.navigation ul li a {
display: block;
voice-family: inherit;
text-decoration: none;
outline: none;
outline: none;
background: #fff;
padding: 7px;
}
Expand All @@ -272,20 +293,23 @@ ul.navigation ul li a {
border-radius: 2px 0 0 2px;
}
.op-content {
height: calc(100vh - 150px); /* topbanner: 80px, topmenue: 60px */
min-height: 350px;
margin: 0 0 0 230px;
margin: 0 0 0 25%;
padding: 0 0 0 12px;
border-left: 1px solid #CCC;
}
.op15-content {
height: calc(100vh - 150px); /* topbanner: 80px, topmenue: 60px */
min-height: 470px;
margin: 0 0 0 230px;
margin: 0 0 0 25%;
padding: 0 0 0 12px;
border-left: 1px solid #CCC;
}
.op16-content {
height: calc(100vh - 150px); /* topbanner: 80px, topmenue: 60px */
min-height: 650px;
margin: 0 0 0 230px;
margin: 0 0 0 25%;
padding: 0 0 0 12px;
border-left: 1px solid #CCC;
}
Expand All @@ -300,24 +324,24 @@ ul.navigation ul li a {
background: #71797d;
}
.top-menu {
height: 35px;
height: 60px;
border-radius: 0;
background: #000;
}
.container {
width: 80%;
width: 96%;
margin-right: auto;
margin-left: auto;
*zoom: 1;
}
.content {
position: relative;
width: 80%;
width: 100%;
border: 1px solid #CCC;
border-radius: 4px;
background: #fff;
margin: 12px auto;
padding: 12px;
margin: 4px auto;
padding: 2px;
/* overflow: auto; so the size of the wrapper is always the size of the longest content */
}
.submit-button {
Expand All @@ -330,14 +354,14 @@ ul.navigation ul li a {
.info { color: #00529B; background-color: #daecf4; }
.warning { color: #9F6000; background-color: #FEEFB3; }
.error {
color: #D8000C;
background-color: #fdd0d0;
position: relative;
width: 80%;
border: 1px solid #fe9393;
border-radius: 4px;
margin: 12px auto;
padding: 12px;
color: #D8000C;
background-color: #fdd0d0;
position: relative;
width: 80%;
border: 1px solid #fe9393;
border-radius: 4px;
margin: 12px auto;
padding: 12px;
}
input:disabled { background-color:#dddddd; }
input[type="submit"]:disabled, input[type="submit"]:hover:disabled, input[type="submit"]:active:disabled {
Expand Down Expand Up @@ -430,3 +454,89 @@ input, select, textarea {
.inline {
display:inline-block;
}

/* For desktops: */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width: 768px){


table.res th {
writing-mode: horizontal-tb;
transform: rotate(0deg);
}
table.res th[data-sort] {
cursor:pointer;
}

table.res td {
writing-mode: horizontal-tb;
transform: rotate(0deg);
}

/*** Fin ***/

input[type=button].btnScheduleRow {
width: inherit;
min-width: 100px;
min-height: inherit;
}

input[type="submit"].blueSubmit {
min-width: 80px;
min-height: inherit;
}
input[type="submit"].redSubmit {
min-width: 80px;
min-height: inherit;
}

#add_space { padding-top: 20px; }
.add-margin-bottom { margin-bottom: 20px; }
/*************** top menu navigation div ***************/
ul.navigation {
padding: inherit;
}

ul.navigation li a {
line-height: 35px;
}

/*************** fin ***************/
.left-menu {
width: 230px;
height: 100%;
overflow: auto;
}

.op-content {
height: auto;
min-height: 350px;
margin: 0 0 0 230px;
}
.op15-content {
height: auto;
min-height: 470px;
margin: 0 0 0 230px;
}
.op16-content {
height: auto;
min-height: 650px;
margin: 0 0 0 230px;
}

.top-menu {
height: 35px;
}
.container {
width: 80%;
}
.content {
width: 80%;
margin: 12px auto;
padding: 12px;
}

.footer {
width: 80%;
}
}