added colors

about/models.py

@@ -6,15 +6,17 @@ from wagtail.models import Page
 from wagtail.fields import RichTextField
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 
+from saburly.custom_editor import FULL_EDITOR
+
 class AboutPage(Page):
 
-    section_one_title = RichTextField(blank=True)
+    section_one_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_text = RichTextField(blank=True)
+    section_one_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_img = RichTextField(blank=True)  
+    section_one_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
-    section_two_title = RichTextField(blank=True)
+    section_two_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_text = RichTextField(blank=True)
+    section_two_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_img = RichTextField(blank=True)  
+    section_two_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([

contact/models.py

@@ -9,6 +9,8 @@ from wagtail.contrib.forms.models import AbstractEmailForm, AbstractFormField
 from wagtail.fields import RichTextField
 from wagtail.admin.panels import FieldPanel, FieldRowPanel,InlinePanel, MultiFieldPanel
 
+from saburly.custom_editor import FULL_EDITOR
+
 
 class FormField(AbstractFormField):
     page = ParentalKey(
@@ -19,13 +21,13 @@ class FormField(AbstractFormField):
 
 class ContactPage(AbstractEmailForm):
 
-    section_one_title = RichTextField(blank=True)
+    section_one_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_text = RichTextField(blank=True)
+    section_one_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_img = RichTextField(blank=True)  
+    section_one_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
-    section_two_title = RichTextField(blank=True)
+    section_two_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_text = RichTextField(blank=True)
+    section_two_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_img = RichTextField(blank=True)  
+    section_two_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
     content_panels = AbstractEmailForm.content_panels + [
         MultiFieldPanel([

home/models.py

@@ -6,28 +6,29 @@ from wagtail.models import Page
 from wagtail.fields import RichTextField
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 
+from saburly.custom_editor import FULL_EDITOR
 
 class HomePage(Page):
 
-    section_one_title = RichTextField(blank=True)
+    section_one_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_text = RichTextField(blank=True)
+    section_one_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_img = RichTextField(blank=True)  
+    section_one_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
-    section_two_title = RichTextField(blank=True)
+    section_two_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_text = RichTextField(blank=True)
+    section_two_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_img = RichTextField(blank=True)  
+    section_two_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
-    section_three_title = RichTextField(blank=True)
+    section_three_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_three_text = RichTextField(blank=True)
+    section_three_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_three_img = RichTextField(blank=True)  
+    section_three_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
-    section_four_title = RichTextField(blank=True)
+    section_four_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_four_text = RichTextField(blank=True)
+    section_four_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_four_img = RichTextField(blank=True)  
+    section_four_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
-    section_five_title = RichTextField(blank=True)
+    section_five_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_five_text = RichTextField(blank=True)
+    section_five_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_five_img = RichTextField(blank=True)  
+    section_five_img = RichTextField(blank=True, features=FULL_EDITOR)  
 
     content_panels = Page.content_panels + [
         MultiFieldPanel([

home/wagtail_hooks.py

@@ -0,0 +1,72 @@
+from wagtail import hooks
+import wagtail.admin.rich_text.editors.draftail.features as draftail_features
+from wagtail.admin.rich_text.converters.html_to_contentstate import BlockElementHandler, InlineStyleElementHandler
+
+@hooks.register('register_rich_text_features')
+def register_alignment_feature(features):
+    alignment_features = ['left', 'center', 'right']
+    labels = {
+        'left': 'L',
+        'center': 'C',
+        'right': 'R'
+    }
+
+    for feature in alignment_features:
+        control = {
+            'label': labels[feature],
+            'type': feature,
+            'description': f'Align {feature}',
+        }
+        features.register_editor_plugin(
+            'draftail', feature, draftail_features.BlockFeature(control)
+        )
+        features.register_converter_rule(
+            'contentstate', feature, {
+                'from_database_format': {
+                    f'div[style="text-align: {feature}"]': BlockElementHandler(feature)
+                },
+                'to_database_format': {
+                    'block_map': {
+                        feature: {
+                            'element': 'div',
+                            'props': {'style': f'text-align: {feature}'}
+                        }
+                    }
+                }
+            }
+        )
+
+@hooks.register('register_rich_text_features')
+def register_color_feature(features):
+    colors = [
+        ('black', '#000000', 'CB'),
+        ('saburly-blue', '#5763AB', 'CS')
+    ]
+
+    for feature_name, color_code, label in colors:
+        control = {
+            'type': feature_name,
+            'label': label,
+            'description': f'Text color: {feature_name}',
+            'style': {'color': color_code},
+        }
+
+        features.register_editor_plugin(
+            'draftail',
+            feature_name,
+            draftail_features.InlineStyleFeature(control),
+        )
+
+        features.register_converter_rule('contentstate', feature_name, {
+            'from_database_format': {
+                f'span[style="color: {color_code}"]': InlineStyleElementHandler(feature_name),
+            },
+            'to_database_format': {
+                'style_map': {
+                    feature_name: {
+                        'element': 'span',
+                        'props': {'style': f'color: {color_code}'}
+                    }
+                }
+            }
+        })

saburly/custom_editor.py

@@ -0,0 +1,8 @@
+FULL_EDITOR = [
+    'bold', 'italic', 'h2', 'h3', 'h4',           
+    'ol', 'ul',                                    
+    'hr',                                    
+    'embed', 'link', 'image',  
+    'black', 'saburly-blue',                            
+    'left', 'center', 'right'                      
+]

saburly/settings/dev.py

@@ -11,4 +11,9 @@ ALLOWED_HOSTS = ["*"]
 
 EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
 
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'static'),
+]
 
+STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

saburly/settings/production.py

@@ -18,6 +18,10 @@ DATABASES = {
     }
 }
 
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'static'),
+]
+
 STATIC_URL = '/static/'
 STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 

services/models.py

@@ -5,48 +5,50 @@ from wagtail.fields import RichTextField
 from wagtail.admin.panels import FieldPanel, MultiFieldPanel
 from wagtail.models import Page
 
+from saburly.custom_editor import FULL_EDITOR
+
 class ServicesPage(Page):
-    section_one_title = RichTextField(blank=True)
+    section_one_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_text = RichTextField(blank=True)
+    section_one_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_one_img = RichTextField(blank=True)
+    section_one_img = RichTextField(blank=True, features=FULL_EDITOR)
 
 
-    section_two_title = RichTextField(blank=True)
+    section_two_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_text = RichTextField(blank=True)
+    section_two_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_two_img = RichTextField(blank=True)
+    section_two_img = RichTextField(blank=True, features=FULL_EDITOR)
 
-    section_three_title = RichTextField(blank=True)
+    section_three_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_three_text = RichTextField(blank=True)
+    section_three_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_three_img = RichTextField(blank=True)
+    section_three_img = RichTextField(blank=True, features=FULL_EDITOR)
 
 
-    section_four_title = RichTextField(blank=True)
+    section_four_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_four_text = RichTextField(blank=True)
+    section_four_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_four_img = RichTextField(blank=True)
+    section_four_img = RichTextField(blank=True, features=FULL_EDITOR)
 
 
-    section_five_title = RichTextField(blank=True)
+    section_five_title = RichTextField(blank=True, features=FULL_EDITOR)
-    section_five_text = RichTextField(blank=True)
+    section_five_text = RichTextField(blank=True, features=FULL_EDITOR)
-    section_five_img = RichTextField(blank=True)
+    section_five_img = RichTextField(blank=True, features=FULL_EDITOR)
 
 
-    sub_section_one = RichTextField(blank=True)
+    sub_section_one = RichTextField(blank=True, features=FULL_EDITOR)
-    sub_section_one_img = RichTextField(blank=True)
+    sub_section_one_img = RichTextField(blank=True, features=FULL_EDITOR)
     
-    sub_section_two = RichTextField(blank=True)
+    sub_section_two = RichTextField(blank=True, features=FULL_EDITOR)
-    sub_section_two_img = RichTextField(blank=True)
+    sub_section_two_img = RichTextField(blank=True, features=FULL_EDITOR)
 
-    sub_section_three = RichTextField(blank=True)
+    sub_section_three = RichTextField(blank=True, features=FULL_EDITOR)
-    sub_section_three_img = RichTextField(blank=True)
+    sub_section_three_img = RichTextField(blank=True, features=FULL_EDITOR)
 
-    sub_section_four = RichTextField(blank=True)
+    sub_section_four = RichTextField(blank=True, features=FULL_EDITOR)
-    sub_section_four_img = RichTextField(blank=True)
+    sub_section_four_img = RichTextField(blank=True, features=FULL_EDITOR)
 
-    sub_section_five = RichTextField(blank=True)
+    sub_section_five = RichTextField(blank=True, features=FULL_EDITOR)
-    sub_section_five_img = RichTextField(blank=True)
+    sub_section_five_img = RichTextField(blank=True, features=FULL_EDITOR)
 
-    sub_section_six = RichTextField(blank=True)
+    sub_section_six = RichTextField(blank=True, features=FULL_EDITOR)
-    sub_section_six_img = RichTextField(blank=True)
+    sub_section_six_img = RichTextField(blank=True, features=FULL_EDITOR)
 
 
 

static/css/welcome_page.85e6f9d19e42.css

@@ -0,0 +1,184 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    max-width: 960px;
+    min-height: 100vh;
+    margin: 0 auto;
+    padding: 0 15px;
+    color: #231f20;
+    font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
+    line-height: 1.25;
+}
+
+a {
+    background-color: transparent;
+    color: #308282;
+    text-decoration: underline;
+}
+
+a:hover {
+    color: #ea1b10;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+ul {
+    padding: 0;
+    margin: 0;
+    font-weight: 400;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.logo {
+    width: 150px;
+    margin-inline-end: 20px;
+}
+
+.logo a {
+    display: block;
+}
+
+.figure-logo {
+    max-width: 150px;
+    max-height: 55.1px;
+}
+
+.release-notes {
+    font-size: 14px;
+}
+
+.main {
+    padding: 40px 0;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.figure-space {
+    max-width: 265px;
+}
+
+@keyframes pos {
+    0%, 100% {
+        transform: rotate(-6deg);
+    }
+    50% {
+        transform: rotate(6deg);
+    }
+}
+
+.egg {
+    fill: #43b1b0;
+    animation: pos 3s ease infinite;
+    transform: translateY(50px);
+    transform-origin: 50% 80%;
+}
+
+.main-text {
+    max-width: 400px;
+    margin: 5px auto;
+}
+
+.main-text h1 {
+    font-size: 22px;
+}
+
+.main-text p {
+    margin: 15px auto 0;
+}
+
+.footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-top: 1px solid #e6e6e6;
+    padding: 10px;
+}
+
+.option {
+    display: block;
+    padding: 10px 10px 10px 34px;
+    position: relative;
+    text-decoration: none;
+}
+
+.option svg {
+    width: 24px;
+    height: 24px;
+    fill: gray;
+    border: 1px solid #d9d9d9;
+    padding: 5px;
+    border-radius: 100%;
+    top: 10px;
+    inset-inline-start: 0;
+    position: absolute;
+}
+
+.option h2 {
+    font-size: 19px;
+    text-decoration: underline;
+}
+
+.option p {
+    padding-top: 3px;
+    color: #231f20;
+    font-size: 15px;
+    font-weight: 300;
+}
+
+@media (max-width: 996px) {
+    body {
+        max-width: 780px;
+    }
+}
+
+@media (max-width: 767px) {
+    .option {
+        flex: 0 0 50%;
+    }
+}
+
+@media (max-width: 599px) {
+    .main {
+        padding: 20px 0;
+    }
+
+    .figure-space {
+        max-width: 200px;
+    }
+
+    .footer {
+        display: block;
+        width: 300px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 360px) {
+    .header-link {
+        max-width: 100px;
+    }
+}

static/css/welcome_page.css

@@ -0,0 +1,184 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+body {
+    max-width: 960px;
+    min-height: 100vh;
+    margin: 0 auto;
+    padding: 0 15px;
+    color: #231f20;
+    font-family: 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
+    line-height: 1.25;
+}
+
+a {
+    background-color: transparent;
+    color: #308282;
+    text-decoration: underline;
+}
+
+a:hover {
+    color: #ea1b10;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+ul {
+    padding: 0;
+    margin: 0;
+    font-weight: 400;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e6e6e6;
+}
+
+.logo {
+    width: 150px;
+    margin-inline-end: 20px;
+}
+
+.logo a {
+    display: block;
+}
+
+.figure-logo {
+    max-width: 150px;
+    max-height: 55.1px;
+}
+
+.release-notes {
+    font-size: 14px;
+}
+
+.main {
+    padding: 40px 0;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.figure-space {
+    max-width: 265px;
+}
+
+@keyframes pos {
+    0%, 100% {
+        transform: rotate(-6deg);
+    }
+    50% {
+        transform: rotate(6deg);
+    }
+}
+
+.egg {
+    fill: #43b1b0;
+    animation: pos 3s ease infinite;
+    transform: translateY(50px);
+    transform-origin: 50% 80%;
+}
+
+.main-text {
+    max-width: 400px;
+    margin: 5px auto;
+}
+
+.main-text h1 {
+    font-size: 22px;
+}
+
+.main-text p {
+    margin: 15px auto 0;
+}
+
+.footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-top: 1px solid #e6e6e6;
+    padding: 10px;
+}
+
+.option {
+    display: block;
+    padding: 10px 10px 10px 34px;
+    position: relative;
+    text-decoration: none;
+}
+
+.option svg {
+    width: 24px;
+    height: 24px;
+    fill: gray;
+    border: 1px solid #d9d9d9;
+    padding: 5px;
+    border-radius: 100%;
+    top: 10px;
+    inset-inline-start: 0;
+    position: absolute;
+}
+
+.option h2 {
+    font-size: 19px;
+    text-decoration: underline;
+}
+
+.option p {
+    padding-top: 3px;
+    color: #231f20;
+    font-size: 15px;
+    font-weight: 300;
+}
+
+@media (max-width: 996px) {
+    body {
+        max-width: 780px;
+    }
+}
+
+@media (max-width: 767px) {
+    .option {
+        flex: 0 0 50%;
+    }
+}
+
+@media (max-width: 599px) {
+    .main {
+        padding: 20px 0;
+    }
+
+    .figure-space {
+        max-width: 200px;
+    }
+
+    .footer {
+        display: block;
+        width: 300px;
+        margin: 0 auto;
+    }
+}
+
+@media (max-width: 360px) {
+    .header-link {
+        max-width: 100px;
+    }
+}

templates/footer.html

@@ -66,9 +66,9 @@
                     </nav>
                     <div>
                         <p class="text-white my-2 leading-normal">
-                            1819 S Pearl St <br />
+                           <strong class="text-lg">Saburly D.O.O </strong> <br />
-                            Denver, CO 80210 <br />
+                            Hakije Turajlica 2 <br />
-                            Phone: 720-643-2025 <br />
+                            71 000 Sarajevo BIH <br />
                             info@saburly.com
                         </p>
                     </div>