diff --git a/website/agenda/planung/css/default.css b/website/agenda/planung/css/default.css
index b04eea8..fd77ca0 100644
--- a/website/agenda/planung/css/default.css
+++ b/website/agenda/planung/css/default.css
@@ -454,28 +454,6 @@ div.badge-error {
background: none;
}
-/*overwrite jquery ui*/
-#content .ui-tabs-nav {
- border: 0;
- background: #fff;
- border-bottom: solid 1px #ccc;
-}
-
-#content .ui-tab a {
- color: #fff;
-}
-
-#content .ui-tabs-tab {
- border: 0;
- background: #aaa;
- padding: 6px;
- border-radius: 3px 3px 0 0;
-}
-
-#content .ui-tab a:hover {
- text-decoration: none;
-}
-
/* overwrite tablesorter */
tr.tablesorter-filter-row {
background: #ccc;
@@ -652,3 +630,46 @@ input.image {
overflow-y: scroll
}
+div#tabs > div {
+ background:white;
+}
+
+ul.tabContainer{
+ background:none;
+ display:block;
+}
+ul.tabContainer li.active{
+ background:#1678c2;
+}
+ul.tabContainer li:hover{
+ border-bottom-color:#1678c2;
+}
+#content ul.tabContainer li a:hover{
+ text-decoration:none;
+}
+
+#content ul.tabContainer li.active a{
+ color:#fff;
+}
+#content ul.tabContainer li.active a:hover{
+ color:#fff;
+}
+ul.tabContainer li{
+ background:white;
+ display:inline-block;
+ padding:1rem;
+ cursor:pointer;
+ border: 1px solid rgba(0, 0, 0, .03);
+ box-shadow: 0 2px 2px rgba(0, 0, 0, .24),
+ 0 0 2px rgba(0, 0, 0, .12);
+ margin-left:-3px;
+ margin-bottom:-2px;
+}
+ul.tabContainer li:first-child{
+ border-top-left-radius:0.5rem;
+ margin-left:4px;
+}
+ul.tabContainer li:last-child{
+ border-top-right-radius:0.5rem;
+}
+
diff --git a/website/agenda/planung/js/default.js b/website/agenda/planung/js/default.js
index 8c796b8..219d135 100644
--- a/website/agenda/planung/js/default.js
+++ b/website/agenda/planung/js/default.js
@@ -353,6 +353,52 @@ function copyToClipboard(text){
document.execCommand("copy");
}
+function setTabs(id, callback) {
+ var key = id + ' ul li';
+ var i = 0;
+
+ // preselect by URL hash
+ var pos=0;
+ $(key).each( function() {
+ if ( window.location.hash == "#"+$(this).children(":first").attr("href").substr(1) )
+ pos=i;
+ i++
+ })
+
+ var i = 0;
+ $(key).each( function() {
+ var elem = $(this);
+ var id = elem.children(":first").attr("href").substr(1);
+ if ( i==pos ) {
+ elem.addClass("active");
+ $('#'+id).show();
+ } else {
+ $('#'+id).hide();
+ elem.removeClass("active");
+ }
+ i++;
+ });
+
+ $( key ).on( "click", function(){
+ var id2 = $(this).children(":first").attr("href").substr(1);
+ $(key).each( function(){
+ var elem = $(this);
+ var id = elem.children(":first").attr("href").substr(1);
+ if (id==id2){
+ $('#'+id).show();
+ elem.addClass("active");
+ } else {
+ $('#'+id).hide();
+ elem.removeClass("active");
+ }
+ });
+ if (callback) callback();
+ return false;
+ });
+ $( id+' ul' ).addClass("tabContainer");
+ return false;
+}
+
$(document).ready(
function(){
setupMenu();
diff --git a/website/agenda/planung/js/edit-series.js b/website/agenda/planung/js/edit-series.js
index 32707f1..0903071 100644
--- a/website/agenda/planung/js/edit-series.js
+++ b/website/agenda/planung/js/edit-series.js
@@ -247,8 +247,7 @@ $(document).ready(
initCheckBoxes();
addCheckBoxHandler();
- $("#tabs").tabs();
- $('#tabs').removeClass('ui-widget ui-widget-content ui-corner-all');
+ setTabs('#tabs');
updateScheduleButtonName();
initScheduleFields();
diff --git a/website/agenda/planung/js/edit_work_time.js b/website/agenda/planung/js/edit_work_time.js
index 6c88b48..8615829 100644
--- a/website/agenda/planung/js/edit_work_time.js
+++ b/website/agenda/planung/js/edit_work_time.js
@@ -204,8 +204,7 @@ $(document).ready(
initCheckBoxes();
addCheckBoxHandler();
- $("#tabs").tabs();
- $('#tabs').removeClass('ui-widget ui-widget-content ui-corner-all');
+ setTabs('#tabs');
updateScheduleButtonName();
initScheduleFields();
diff --git a/website/agenda/planung/js/image.js b/website/agenda/planung/js/image.js
index 11c5277..b649bd2 100644
--- a/website/agenda/planung/js/image.js
+++ b/website/agenda/planung/js/image.js
@@ -1,7 +1,7 @@
// get current selected tab by tabs-id
function getSelectedTab(id){
- var selector = '#'+id+" li.ui-tabs-active a";
+ var selector = '#'+id+" li.active a";
var tabValue = $(selector).attr("value");
return tabValue;
}
diff --git a/website/agenda/planung/js/studio-timeslots.js b/website/agenda/planung/js/studio-timeslots.js
index 70d29e8..bb02de9 100644
--- a/website/agenda/planung/js/studio-timeslots.js
+++ b/website/agenda/planung/js/studio-timeslots.js
@@ -68,16 +68,7 @@ $(document).ready(
updateWeekdays();
});
- $("#tabs").tabs({
- activate: function(){
- console.log("set style");
- $('.tablesorter-scroller-header').css('width','95%');
- $('.tablesorter-scroller-table').css('width','95%');
- $('.tablesorter-scroller-header table').css('width','95%');
- $('.tablesorter-scroller-table table').css('width','95%');
- }
- });
- $('#tabs').removeClass('ui-widget ui-widget-content ui-corner-all');
+ setTabs('#tabs');
initTextWidth();
diff --git a/website/agenda/planung/templates/image.html b/website/agenda/planung/templates/image.html
index 8078aef..cb0900f 100644
--- a/website/agenda/planung/templates/image.html
+++ b/website/agenda/planung/templates/image.html
@@ -17,22 +17,19 @@
addLocalization('image');
//add tab change handler
- $("#image-tabs").tabs({
- activate: function(event, ui){
- if (ui==null) return;
- selectedImageTab = getSelectedTab('image-tabs');
+ setTabs("#image-tabs", function(){
+ selectedImageTab = getSelectedTab('image-tabs');
-
- if(selectedImageTab=="upload"){
- initUploadDialog();
- $('#imageList').hide();
- return;
- }
-
+
+ if(selectedImageTab=="upload"){
+ initUploadDialog();
+ $('#imageList').hide();
+ return;
+ }
+
- //TODO: add confirm handler
- $('#imageList').show();
- }
+ //TODO: add confirm handler
+ $('#imageList').show();
});
// get initially selected tab
selectedImageTab = getSelectedTab('image-tabs');