summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristian Pointner <equinox@helsinki.at>2016-09-25 17:00:39 (GMT)
committerChristian Pointner <equinox@helsinki.at>2016-09-25 17:01:12 (GMT)
commitabff311cf69765ce7afebfb1523d37717af88e8e (patch)
treea47fc6fc1ec1edcb3e6ef48ae25da14dcb530e99
parentc29fb1651d3b8c5211da2d8f527b7f41370ad287 (diff)
use bootstrap for styling
Diffstat
-rw-r--r--www/index.html35
-rw-r--r--www/styles/common.css71
-rw-r--r--www/styles/weeks.css26
-rw-r--r--www/weeks.html68
4 files changed, 67 insertions, 133 deletions
diff --git a/www/index.html b/www/index.html
index f08908e..3b7c067 100644
--- a/www/index.html
+++ b/www/index.html
@@ -6,33 +6,36 @@
<meta name="author" content="Christian Pointner <equinox@helsinki.at>">
<link rel="shortcut icon" href="/img/favicon.ico" />
+
+ <link href="/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/styles/common.css" rel="stylesheet">
<link href="/styles/main.css" rel="stylesheet">
- <script src="/javascript/jquery/jquery.min.js"></script>
- <script src="/js/utils.js"></script>
- <script src="/js/clock.js"></script>
- <script src="/js/system.js"></script>
+
+ <script src="/javascript/react/react.js"></script>
+ <script src="/javascript/react/react-dom.js"></script>
+<!--
+ <script src="/javascript/react/react.min.js"></script>
+ <script src="/javascript/react/react-dom.min.js"></script>
+-->
+ <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
+ <!-- <script src="/javascript/jquery/jquery.min.js"></script> -->
+ <!-- <script src="/js/utils.js"></script> -->
+ <!-- <script src="/js/clock.js"></script> -->
</head>
<body>
<div id="container">
<img src="/img/helsinki.png" alt="Radio Helsinki Logo" />
<h1>Radio Helsinki - Automation Status</h1>
- <div id="clock">
- <span class="current-week"></span>
- <span class="clock-date"></span>
- <span class="clock-time"></span>
- </div>
+ <div id="clock"></div>
- <div id="system">
- <span>Active System</span>
- <span class="system-name label label-default">unknown</span>
- </div>
</div>
- <script type="text/javascript">
- clock_init();
- system_init();
+ <!-- <script type="text/javascript"> -->
+ <!-- clock_init(); -->
+ <!-- </script> -->
+ <script type="text/babel">
+ ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('clock'));
</script>
</body>
diff --git a/www/styles/common.css b/www/styles/common.css
index 179601f..7e0d8a8 100644
--- a/www/styles/common.css
+++ b/www/styles/common.css
@@ -24,74 +24,3 @@ body {
font-family: Sans-Serif;
}
-#container {
- text-align: center;
- margin-left: auto;
- margin-right: auto;
-}
-
-.label {
- display: inline;
- padding: .2em .6em .3em;
- font-size: 75%;
- font-weight: bold;
- line-height: 1;
- color: #ffffff;
- text-align: center;
- white-space: nowrap;
- vertical-align: baseline;
- border-radius: .25em;
- position: relative;
- top: -1px;
-}
-a.label:hover,
-a.label:focus {
- color: #ffffff;
- text-decoration: none;
- cursor: pointer;
-}
-.label:empty {
- display: none;
-}
-.label-default {
- background-color: #777777;
-}
-.label-default[href]:hover,
-.label-default[href]:focus {
- background-color: #5e5e5e;
-}
-.label-primary {
- background-color: #428bca;
-}
-.label-primary[href]:hover,
-.label-primary[href]:focus {
- background-color: #3071a9;
-}
-.label-success {
- background-color: #5cb85c;
-}
-.label-success[href]:hover,
-.label-success[href]:focus {
- background-color: #449d44;
-}
-.label-info {
- background-color: #5bc0de;
-}
-.label-info[href]:hover,
-.label-info[href]:focus {
- background-color: #31b0d5;
-}
-.label-warning {
- background-color: #f0ad4e;
-}
-.label-warning[href]:hover,
-.label-warning[href]:focus {
- background-color: #ec971f;
-}
-.label-danger {
- background-color: #d9534f;
-}
-.label-danger[href]:hover,
-.label-danger[href]:focus {
- background-color: #c9302c;
-}
diff --git a/www/styles/weeks.css b/www/styles/weeks.css
index 2d6a547..c3b0649 100644
--- a/www/styles/weeks.css
+++ b/www/styles/weeks.css
@@ -19,12 +19,13 @@
* along with rhrdweb. If not, see <http://www.gnu.org/licenses/>.
*/
-#leftcol {
- float: left;
- width: 42%;
- min-width: 25em;
- margin-top: 5em;
- margin-bottom: 5em;
+#title {
+ display: block;
+ width: 100%;
+ height: 100%;
+ vertical-align: middle;
+ text-align: center;
+ margin-top: 10em;
}
#clock {
@@ -60,6 +61,11 @@
}
#buttons {
+ display: block;
+ width: 100%;
+ height: 100%;
+ vertical-align: middle;
+ text-align: center;
margin-top: 3em;
}
@@ -70,12 +76,6 @@
margin: 0.2em;
}
-#rightcol {
- float: left;
- width: 58%;
- min-width: 25em;
-}
-
#calendar {
margin-top: 2em;
border-spacing: 0;
@@ -111,7 +111,7 @@
}
#calendar td.month {
- width: 6em;
+ width: 8em;
font-size: 1.2em;
font-weight: bold;
border-left: 2px solid #eee;
diff --git a/www/weeks.html b/www/weeks.html
index 0316fad..8ca1e7c 100644
--- a/www/weeks.html
+++ b/www/weeks.html
@@ -6,6 +6,7 @@
<meta name="author" content="Christian Pointner <equinox@helsinki.at>">
<link rel="shortcut icon" href="/img/favicon.ico" />
+ <link href="/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/styles/common.css" rel="stylesheet">
<link href="/styles/weeks.css" rel="stylesheet">
<script src="/javascript/jquery/jquery.min.js"></script>
@@ -14,43 +15,44 @@
<script src="/js/calendar.js"></script>
</head>
<body>
- <div id="container">
- <div id="leftcol">
- <div id="title">
- <h1>Rivendell Wochenplan</h1>
- </div>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-4 col-md-offset-1">
+ <div id="title">
+ <h1>Rivendell Wochenplan</h1>
+ </div>
- <div id="clock">
- <h2>aktuelle Woche:</h2>
- <span class="current-week"></span>
- <span class="clock-date"></span>
- <span class="clock-time"></span>
- </div>
+ <div id="clock">
+ <h2>aktuelle Woche:</h2>
+ <span class="current-week"></span>
+ <span class="clock-date"></span>
+ <span class="clock-time"></span>
+ </div>
- <div id="buttons">
- <div>
- <input id="btn-today" type="button" value="Heute">
+ <div id="buttons">
+ <div class="btn-group btn-group-lg" role="group">
+ <button type="button" class="btn btn-default" id="btn-earlier"><span class="glyphicon glyphicon-minus"></span></button>
+ <button type="button" class="btn btn-default" id="btn-today">Heute</button>
+ <button type="button" class="btn btn-default" id="btn-later"><span class="glyphicon glyphicon-plus"></span></button>
+ </div>
</div>
- <input id="btn-earlier" type="button" value="Früher">
- <input id="btn-later" type="button" value="Später">
</div>
- </div>
-
- <div id="rightcol">
- <table id="calendar">
- <tr>
- <th></th>
- <th></th>
- <th>Mo</th>
- <th>Di</th>
- <th>Mi</th>
- <th>Do</th>
- <th>Fr</th>
- <th>Sa</th>
- <th>So</th>
- <th></th>
- </tr>
- </table>
+ <div class="col-md-5 col-md-offset-1">
+ <table id="calendar">
+ <tr>
+ <th></th>
+ <th></th>
+ <th>Mo</th>
+ <th>Di</th>
+ <th>Mi</th>
+ <th>Do</th>
+ <th>Fr</th>
+ <th>Sa</th>
+ <th>So</th>
+ <th></th>
+ </tr>
+ </table>
+ </div>
</div>
</div>
generated by cgit v0.10.2 at 2024-05-17 11:17:45 (GMT)