JPT/dashboard
0
0
Fork 0
Code Issues Pull Requests Activity

[TASK] Seperate header and body from content-container.

Browse Source
This commit is contained in:
Jan Philipp Timme 2013-09-12 15:21:54 +02:00
parent 5f2ac4a804
commit 5f515eb5bc
3 changed files with 66 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@ -39,68 +39,76 @@
<div id="content-grid-container">
<div class="content-column-bounding-box">
<div id="content-column-1" class="content-column">
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Col1</h1>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Irgendne Überschrift ...</h1>
<div class="content-container-header">
<h1>Content Box Header</h1>
</div>
<div class="content-container-body">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
</div><!-- content-column-1 -->
</div><!-- content-column-bounding-box -->
<div class="content-column-bounding-box">
<div id="content-column-2" class="content-column">
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Col2</h1>
<div class="content-container-header">
<h1>Content Box Header</h1>
</div>
<div class="content-container-body">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Irgendne Überschrift ...</h1>
<div class="content-container-header">
<h1>Content Box Header</h1>
</div>
<div class="content-container-body">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Irgendne Überschrift ...</h1>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Irgendne Überschrift ...</h1>
<div class="content-container-header">
<h1>Content Box Header</h1>
</div>
<div class="content-container-body">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
</div><!-- content-column-2 -->
</div><!-- content-column-bounding-box -->
<div class="content-column-bounding-box">
<div id="content-column-3" class="content-column">
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Col3</h1>
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
<div class="content-container-header">
<h1>Content Box Header</h1>
</div>
</div>
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Irgendne Überschrift ...</h1>
<div class="content-container-body">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
<div class="content-container-bounding-box">
<div class="content-container">
<h1>Irgendne Überschrift ...</h1>
<div class="content-container-header">
<h1>Content Box Header</h1>
</div>
<div class="content-container-body">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
<div class="content-container-bounding-box">
<div class="content-container-header">
<h1>Content Box Header</h1>
</div>
<div class="content-container-body">
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
</div>
</div>
</div><!-- content-column-3 -->
</div><!-- content-column-bounding-box -->
<div class="clear-both"></div>

5
js/main.js
View File

@ -1,4 +1,9 @@
$(function() {
$(".content-container-header").each(function() {
$(this).css("background-color", "hsla(" + Math.round(Math.random() * 360) + ", 100%, 50%, 1);");
});
//setup the draggable content containers
$(".content-container-bounding-box").draggable({
"distance": 10,

36
style/main.css
View File

@ -80,27 +80,39 @@ h5 { font-size: 11pt; }
padding-bottom: 4em;
}
.content-container {
padding-top: 0.3em;
padding-bottom: 0.3em;
.content-container-header {
cursor: move;
padding-left: 0.75em;
padding-right: 0.75em;
padding-top: 5px; /* see border-radius */
padding-bottom: 0em;
color: hsla(0, 0%, 10%, 0.9);
background-color: hsla(0, 0%, 100%, 0.8);
border-radius: 5px;
background-color: hsla(0, 0%, 65%, 0.75);
border-radius: 5px 5px 0px 0px;
}
.content-container h1 {
margin-top: 5px; /* see border-radius of .content-container */
padding-left: 0.5em;
padding-right: 0.5em;
background-color: hsla(0, 100%, 100%, 0.3);
.content-container-header h1 {
color: hsla(0, 0%, 25%, 1);
}
.content-container p {
margin: 0.5em 0.75em 1em 0.75em;
.content-container-body {
padding: 0.5em 0.75em 1em 0.75em;
color: hsla(0, 0%, 10%, 0.9);
background-color: hsla(0, 0%, 100%, 0.8);
border-radius: 0px 0px 5px 5px;
}
.content-container-body p {
color: hsla(0, 0%, 5%, 1);
}
.droppable-container-placeholder {
border-width: 2px 2px 2px 2px;
border-style: dashed;
border-color: hsla(0, 0%, 33%, 0.75);
margin-bottom: 2em;
}
#wallpaper {
position: fixed;
top: 0px;