From: rabuzarus <> Date: Mon, 27 Jun 2016 08:33:20 +0000 (+0200) Subject: frio: restructure jot modal and make jot modal work on mobile X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=571a4fed99a5aa215d622d140246861bcf44dbce;p=friendica.git frio: restructure jot modal and make jot modal work on mobile --- diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 1eda19764f..c7cf213724 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -69,6 +69,9 @@ iframe, img { .fakelink { cursor: pointer; } +.hidden { + display: none !important; +} /* * standard page elements @@ -156,6 +159,15 @@ a#item-delete-selected { outline: 0; background: $btn_primary_hover_color !important; } +.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, +.btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, +.open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, +.open>.dropdown-toggle.btn-primary:hover,.btn-primary.active, .btn-primary:active, +.open>.dropdown-toggle.btn-primary { + background: $btn_primary_hover_color; + border-color: none; +} + .btn-link { /* color: #6fdbe8;*/ color: $link_color; diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js index 15a4f7f6e6..b58288318d 100644 --- a/view/theme/frio/js/modal.js +++ b/view/theme/frio/js/modal.js @@ -224,7 +224,7 @@ function editpost(url) { url = url + " #profile-jot-form"; //var rand_num = random_digits(12); - $(".jot-nav #jot-perms-lnk").parent("li").hide(); + $(".jot-nav .jot-perms-lnk").parent("li").addClass("hidden"); // For editpost we load the modal html form the edit page. So we would have two jot forms in // the page html. To avoid js conflicts we store the original jot in the variable jotcache. @@ -241,7 +241,7 @@ function editpost(url) { jotreset(); modal - .find('#jot-modal-body') + .find('#jot-modal-content') .load(url, function (responseText, textStatus) { if ( textStatus === 'success' || textStatus === 'notmodified') @@ -267,7 +267,7 @@ function jotreset() { // We need this to prevent that the modal displays old content $('body').on('hidden.bs.modal', '#jot-modal.edit-jot', function () { $(this).removeData('bs.modal'); - $(".jot-nav #jot-perms-lnk").parent("li").show(); + $(".jot-nav .jot-perms-lnk").parent("li").removeClass("hidden"); $("#profile-jot-form #jot-title-wrap").show(); $("#profile-jot-form #jot-category-wrap").show(); @@ -281,14 +281,14 @@ function jotreset() { // remove the "edit-jot" class so we can the standard behavior on close $("#jot-modal.edit-jot").removeClass("edit-jot"); - $("#jot-modal-body").empty(); + $("#jot-modal-content").empty(); }); } // Give the active "jot-nav" list element the class "active" function toggleJotNav (elm) { // select all li of jot-nav and remove the active class - $(elm).closest(".jot-nav").children("li").removeClass("active"); + $(".jot-nav li").removeClass("active"); // add the active class to the parent of the link which was selected $(elm).parent("li").addClass("active"); } diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 296c4667d3..1e26ad7705 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -206,6 +206,16 @@ $(document).ready(function(){ // put the new element to the second nav bar $("#topbar-second > .container > #tabmenu").append(newText); } + + // Dropdown menus with the class "dropdown-head" will display the active tab + // as button text + $("body").on('click', '.dropdown-head .dropdown-menu li a', function(){ + $(this).closest(".dropdown").find('.btn').html($(this).text() + ' '); + $(this).closest(".dropdown").find('.btn').val($(this).data('value')); + $(this).closest("ul").children("li").show(); + $(this).parent("li").hide(); + }); + }); //function commentOpenUI(obj, id) { // $(document).unbind( "click.commentOpen", handler ); diff --git a/view/theme/frio/templates/jot-header.tpl b/view/theme/frio/templates/jot-header.tpl index dc4bf32fc5..3bec6839f0 100644 --- a/view/theme/frio/templates/jot-header.tpl +++ b/view/theme/frio/templates/jot-header.tpl @@ -400,10 +400,9 @@ function enableOnUser(){ jotcache = $("#profile-jot-form"); modal - .find('#jot-modal-body') + .find('#jot-modal-content') .append(jotcache) - .modal.show - ; + .modal.show; } // the following functions show/hide the specific jot content diff --git a/view/theme/frio/templates/jot.tpl b/view/theme/frio/templates/jot.tpl index b1b022f06f..0d88472863 100644 --- a/view/theme/frio/templates/jot.tpl +++ b/view/theme/frio/templates/jot.tpl @@ -5,68 +5,100 @@
-
-
-
- -
+
+ {{* Note: We need 2 modal close buttons here to bypass a bug in bootstrap. + The second is for mobile view. The first one doesnt work with dropdowns. To get a working close button + in with dropdows the close button needs to be inserted after the dropdown. *}} + + + {{* The Jot navigation menu (text input, permissions, preview, filebrowser) *}} + -
- - {{* The hidden input fields which submit important values with the post *}} - - - - - - - - - {{if $notes_cid}} - - {{/if}} -
- {{if $placeholdercategory}} -
- {{/if}} - - {{* The jot text field in which the post text is inserted *}} -
- + + +
+ +
- -
- +
+ + {{* The hidden input fields which submit important values with the post *}} + + + + + + + + + {{if $notes_cid}} + + {{/if}} +
+ {{if $placeholdercategory}} +
+ {{/if}} + + {{* The jot text field in which the post text is inserted *}} +
+ +
+ + +
- + + + - + - {{if $content}}{{/if}} + {{if $content}}{{/if}} +
@@ -80,41 +112,7 @@ can load different content into the jot moadl (e.g. the item edit jot) *}}