diff --git a/index.html b/index.html index 913cd5a..22ae833 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,6 @@
  • Oder mach etwas!
  • -

    Some random stuff maybe a search bar or some fancy info box?

    @@ -39,47 +38,63 @@
    -
    -

    Col1

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +

    Col1

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    -
    -

    Irgendne Überschrift ...

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +

    Irgendne Überschrift ...

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    -
    -
    -

    Col2

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +

    Col2

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    -
    -

    Irgendne Überschrift ...

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +

    Irgendne Überschrift ...

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    -
    -

    Irgendne Überschrift ...

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +

    Irgendne Überschrift ...

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +
    +
    +

    Irgendne Überschrift ...

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    -
    -

    Irgendne Überschrift ...

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    -
    -
    -
    -

    Col3

    -

    Hallo!
    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.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +

    Col3

    +

    Hallo!
    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.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    -
    -

    Irgendne Überschrift ...

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    -
    -
    -

    Irgendne Überschrift ...

    -

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +

    Irgendne Überschrift ...

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    +
    +
    +
    +

    Irgendne Überschrift ...

    +

    Hallo!
    Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.
    Ein paar Sätze pro Absatz und gut ist! ;-)

    Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.

    Achja: Ich grüße alle die mich kennen!
    Macht's gut!

    +
    diff --git a/js/main.js b/js/main.js index 50fd971..b19419e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,7 +1,6 @@ $(function() { //setup the draggable content containers $(".content-container").draggable({ - //"containment": $("#content-grid-container"), //this seems buggy? "distance": 10, "handle": "h1", "helper": "clone", @@ -26,6 +25,7 @@ $(function() { //setup the dropzones $(".content-column").droppable({ + "greedy": false, "scope": "widget", "tolerance": "pointer", "drop": function(event, ui) { @@ -33,7 +33,25 @@ $(function() { console.log(["drop", event, ui]); }, "over": function(event, ui) { - $(event.target).css("background-color", "hsla(0, 0%, 100%, 0.4);"); + $(event.target).css("background-color", "hsla(0, 100%, 100%, 0.4);"); + console.log(["over", event, ui]); + }, + "out": function(event, ui) { + $(event.target).css("background-color", ""); + console.log(["out", event, ui]); + } + }); + + $(".content-container-bounding-box").droppable({ + "greedy": true, + "scope": "widget", + "tolerance": "pointer", + "drop": function(event, ui) { + $(event.target).css("background-color", ""); + console.log(["drop", event, ui]); + }, + "over": function(event, ui) { + $(event.target).css("background-color", "hsla(0, 100%, 50%, 0.4);"); console.log(["over", event, ui]); }, "out": function(event, ui) { diff --git a/style/main.css b/style/main.css index 5562fd4..eb1ac0a 100644 --- a/style/main.css +++ b/style/main.css @@ -70,10 +70,13 @@ h5 { font-size: 11pt; } margin-bottom: 0em; } +.content-container-bounding-box { + padding: 1em 1em 2em 1em; +} + .content-container { padding-top: 0.3em; padding-bottom: 0.3em; - margin: 1em 1em 2em 1em; color: hsla(0, 0%, 10%, 0.9); background-color: hsla(0, 0%, 100%, 0.8); border-radius: 5px;