Design Adminportal

← zurück zum Umsetzung Wiki

Verantwortlicher:
Simon Künnen

Beschreibung:
Im Adminportal können die Bars bearbeitet werden. Das Portal gehört nicht zur direkten Anwendung und wird auch nicht für mobile Devices zur Verfügung stehen. Meldungen und Informationen werden nach dem klicken auf eine Bar in der Liste angezeigt. Da dieses Portal nur optional war, ist die konkrete Logik noch nicht vorhanden. Das Design spiegelt also ein Konzept wieder, welches noch nicht umgesetzt wurde.

Betroffende Dateien:
style.css
elements.css

Eingebundene Bibliotheken:
jquery.dataTables.min.js

Genutzte Elemente:
Icons

Darstellung:

---

###Login Window

Im folgenden wird ein Login-Window beschrieben, welches zur Identifikation benutzt wird, um zum Adminportal zu gelangen.

index.html

<div id="e__popup-overlay"></div>
<div id="logo"><h1 id="theatre-head-topbar-title" class="i-f__gohappylogo"></h1></div>
		<div id="login-window">
			<table>
				<tr>
					<td width="40%" >Name: </td>
					<td>
						<input type="text" name="name" />
					</td>
				</tr>
				<tr>
					<td>Password: </td>
					<td>
						<input type="password" name="password" />
					</td>
				</tr>
				<tr>
					<td colspan="2"><br /><br /><input class="login-button" type="submit" value="Login"></td>
				</tr>
			</table>
		</div>

*style.css

#login-window {
	width:300px;
	background:#fff;
	box-shadow: 0px 0px 10px #424242;
	border:1px solid #c0c0c0;
	margin: 0px auto;
	top: 20%;
	position:relative;
	padding: 30px;
}
#login-window  input {
	width: 100%;
}

.login-button {
	background-color: #4d4d4d;
	color: #fff;
	border: 0px;
	height: 24px;
	width: 100%;
}

#login-window  td {
	height:35px;
}

.negative{
}
.positive{
}

#logo {
	margin: 0px auto;
	top: 20%;
	position:relative;
	text-align:center;
}

###Content Window

Im folgenden wird ein Content-Window beschrieben, in dem die verschiedenen Datensätze angezeigt werden können.

index.html

	<div id="logo-content"><h1 id="theatre-head-topbar-title" class="i-f__gohappylogo"></h1></div>
	<div id="table-window">
	<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Barname</th>
			<th>Meldungen</th>
            <th>Beschreibung</th>
			<th>Happy-Hour</th>
			<th>Öffnungszeiten</th>
			<th>Adresse</th>
			
        </tr>
    </thead>
    <tbody>
	<tr>
            <td>Hacienda</td>
			<td>Hacienda</td>
            <td>Mexikanische Bar in ...</td>
			<td>13:00 - 14:00 Alle Cocktails halber Preis</td>
            <td>8:00 - 24:00</td>
			<td>Neue Straße 12</td>
        </tr>
        <tr>
            <td>Mauritius</td>
			<td>Hacienda</td>
            <td>Zweimal in Stuttgart und ...</td>
			<td>00:00 - 24:00 alle Cocktails 4,99€</td>
            <td>14:00 - 03:00</td>
			<td>Marienstraße 4</td>
        </tr>

    </tbody>
</table>
	
	</div>
</div>
</body>
	<!-- jQuery -->
	<script type="text/javascript" charset="utf8" src="js/jquery-1.11.1.min.js"></script>
	<!-- DataTables -->
	<script type="text/javascript" charset="utf8" src="js/jquery.dataTables.min.js"></script>
	<script>
		$(document).ready( function () {
			$('#table_id').DataTable();
		} );
	</script>

style.css

#logo {
	margin: 0px auto;
	top: 20%;
	position:relative;
	text-align:center;
}

#logo-content{
	position:relative;
	width: 85%;
	margin: 0px auto;
}

#table-window {
	margin-top:200px;
	width:85%;
	margin: 0px auto;
}