diff --git a/assets/css/components/posts/form.css b/assets/css/components/posts/form.css index 07be9ece..fb865f3c 100644 --- a/assets/css/components/posts/form.css +++ b/assets/css/components/posts/form.css @@ -14,7 +14,19 @@ margin-bottom: 10px; } -.post-form .post-types .radio { - display: inline-block; - padding-right: 20px; +.post-form .post-types { + text-align: center; +} + +.post-form .post-types label { + margin: 5px; +} + +.post-form .post-form-choice input { + display: none; +} + +.post-form-choice input:checked ~ span { + color: #72afd2; + font-size: 110%; } \ No newline at end of file diff --git a/assets/js/components/posts/form.js b/assets/js/components/posts/form.js index ab6d4318..cda8dbdf 100644 --- a/assets/js/components/posts/form.js +++ b/assets/js/components/posts/form.js @@ -50,29 +50,29 @@ ComunicWeb.components.posts.form = { }); //Text - var textType = create_radio(postTypesContener, "post_type", "Text"); - $(textType).iCheck("check"); + var textType = this._add_post_type(postTypesContener, "text", "Text"); + textType.checked = true; //Image - var imageType = create_radio(postTypesContener, "post_type", "Image"); + var imageType = this._add_post_type(postTypesContener, "image", " "); //Youtube - var youtubeType = create_radio(postTypesContener, "post_type", "YouTube"); + var youtubeType = this._add_post_type(postTypesContener, "youtube", " "); //Movie - var movieType = create_radio(postTypesContener, "post_type", "Movie"); + var movieType = this._add_post_type(postTypesContener, "movie", " "); //Link - var linkType = create_radio(postTypesContener, "post_type", "Link"); + var linkType = this._add_post_type(postTypesContener, "link", " "); //PDF - var pdfType = create_radio(postTypesContener, "post_type", "PDF"); + var pdfType = this._add_post_type(postTypesContener, "pdf", " "); //Countdown timer - var countdownType = create_radio(postTypesContener, "post_type", "Countdown timer"); + var countdownType = this._add_post_type(postTypesContener, "countdown", " "); //Survey - var surveyType = create_radio(postTypesContener, "post_type", "Survey"); + var surveyType = this._add_post_type(postTypesContener, "survey", " "); //Add send button var sendButton = createElem2({ @@ -81,6 +81,38 @@ ComunicWeb.components.posts.form = { class: "btn btn-primary pull-right", innerHTML: "Send" }); - } + }, + /** + * Create and add post type choice + * + * @param {HTMLElement} target The target for the post type + * @param {string} value The value of the new post type + * @param {string} label The label associated with the post type + * @return {HTMLElement} The created input + */ + _add_post_type: function(target, value, label){ + + var postTypeContener = createElem2({ + appendTo: target, + type: "label", + class: "post-form-choice" + }); + + var input = createElem2({ + appendTo: postTypeContener, + type: "input", + elemType: "radio", + name: "post_type", + value: value + }); + + createElem2({ + appendTo: postTypeContener, + type: "span", + innerHTML: label + }); + + return input; + } } \ No newline at end of file