fix user keys layout, adjust @media breakpoints to bs4, fix more unused css, optimize script

datacenterlight/static/datacenterlight/css/hosting.css

@@ -169,13 +169,13 @@
   max-width: 1120px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .content-dashboard {
     padding: 0 15px;
   }
 }
 
-@media (max-width: 540px) {
+@media (max-width: 576px) {
   select {
     width: 280px;
   }
@@ -284,7 +284,7 @@
   margin: 15px auto;
 }
 
-@media (min-width: 768px) and (max-width: 900px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .modal-dialog {
     width: 50%;
   }
@@ -296,7 +296,7 @@
   }
 }
 
-@media(min-width: 320px) {
+@media(min-width: 576px) {
   .modal:before {
     content: '';
     display: inline-block;

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -215,7 +215,7 @@ textarea {
 
 /* Show the dropdown menu on hover */
 
-@media (min-width: 769px) {
+@media (min-width: 768px) {
   .nav-language .dropdown:hover .dropdown-menu {
     display: block;
   }
@@ -769,7 +769,7 @@ tech-sub-sec h2 {
   display: inline-block;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .ssdimg img {
     width: 100px;
   }
@@ -884,7 +884,6 @@ tech-sub-sec h2 {
 
 .price-calc-section .card .description span {
   font-size: 16px;
-  margin-left: 4px;
   margin-left: 0px;
   width: 30%;
   text-align: left;
@@ -1002,7 +1001,7 @@ tech-sub-sec h2 {
   }
 }
 
-@media screen and (min-width: 480px) and (max-width: 767px) {
+@media (min-width: 576px) and (max-width: 767px) {
   .logo-wrap, .logo-wrap-1 {
     width: 50%;
     padding: 15px 30px !important;
@@ -1010,7 +1009,7 @@ tech-sub-sec h2 {
   }
 }
 
-@media(max-width:990px) {
+@media(max-width:991px) {
   .pricing-section .text {
     text-align: center;
     margin-bottom: 40px;
@@ -1174,7 +1173,7 @@ tech-sub-sec h2 {
   }
 }
 
-@media(max-width:540px) {
+@media(max-width:575px) {
   .logo-wrap {
     padding: 30px;
   }
@@ -1201,7 +1200,6 @@ tech-sub-sec h2 {
   }
   .price-calc-section .card .description span {
     font-size: 15px;
-    margin-left: 0px;
   }
 }
 

datacenterlight/urls.py

@@ -1,8 +1,8 @@
 from django.conf.urls import url
 
 from .views import (
-    IndexView, BetaProgramView, LandingProgramView, BetaAccessView,
+    # BetaProgramView, SuccessView, LandingProgramView,
-    SuccessView, PaymentOrderView, OrderConfirmationView,
+    IndexView, BetaAccessView, PaymentOrderView, OrderConfirmationView,
     WhyDataCenterLightView, ContactUsView
 )
 

hosting/templates/hosting/choice_ssh_keys.html

@@ -25,7 +25,6 @@
                             {% trans "Generate" %}
                         </button>
                     </form>
-
                 </div>
                 <div>
                     <h2>{% trans "Using existing key" %}</h2>

hosting/templates/hosting/user_key.html

@@ -4,7 +4,7 @@
 <div>
 	<div class="virtual-machine-container dashboard-container">
 		<div class="row">
-			<div class="col-md-9 col-md-offset-2">
+			<div class="col-md-8 col-md-offset-2">
                 <form method="POST" action="" novalidate class="form-ssh">
                     {% csrf_token %}
                     <div class="page-header">

utils/management/commands/optimize_frontend.py

@@ -1,6 +1,7 @@
 import csv
 import logging
 import os
+import pprint
 import re
 from collections import Counter, OrderedDict
 from itertools import zip_longest
@@ -17,8 +18,11 @@ RE_PATTERNS = {
     'view_html': '[\'\"](.*\.html)',
     'html_html': '{% (?:extends|include) [\'\"]?(.*\.html)',
     'html_style': '{% static [\'\"]?(.*\.css)',
+    'css_media': (
+        '^\s*\@media([^{]+)\{\s*([\s\S]*?})\s*}'
+    ),
     'css_selector': (
-        '^\s*([.#\[:_A-Za-z][.#\[\]\(\)=:+~\-_A-Za-z0-9\s>,]*)'
+        '^\s*([.#\[:_A-Za-z][^{]*)'
         '{([\s\S]*?)}'
     ),
     'html_class': 'class=[\'\"]([a-zA-Z0-9-_\s]*)',
@@ -54,123 +58,176 @@ class Command(BaseCommand):
         for app in apps_list:
             if options['css']:
                 self.optimize_css(app)
-            else:
+            # else:
-                self.optimize_all(app)
+            #     optimize_all(app)
 
     def optimize_css(self, app_name):
         # get html and css files used in the app
-        files = self.get_files(app_name)
+        files = get_files(app_name)
         # get_selectors_from_css
-        css_selectors = self.get_selectors_css(files['style'])
+        css_selectors = get_selectors_css(files['style'])
         # get_selectors_from_html
-        html_selectors = self.get_selectors_html(files['html'])
+        html_selectors = get_selectors_html(files['html'])
+        # get duplication of css rules from css files
+        css_dup_report = get_css_duplication(css_selectors)
 
-        # duplicate css selectors in stylesheets
-        for file, selectors in css_selectors.items():
-            count = {}
-            for selector in selectors:
-                if selector[0] in count:
-                    count[selector[0]] += 1
-                    print(file, selector[0], count[selector[0]])
-                else:
-                    count[selector[0]] = 1
 
-    def get_files(self, app_name):
+def get_files(app_name):
-        # the view file for the app
+    # the view file for the app
-        app_view = os.path.join(settings.PROJECT_DIR, app_name, 'views.py')
+    app_view = os.path.join(settings.PROJECT_DIR, app_name, 'views.py')
-        # get template files called from the view
+    # get template files called from the view
-        all_html_list = file_match_pattern(app_view, ['view_html'])[0]
+    all_html_list = file_match_pattern(app_view, 'view_html')
-        # list of unique template files
+    # list of unique template files
-        uniq_html_list = list(OrderedDict.fromkeys(all_html_list).keys())
+    uniq_html_list = list(OrderedDict.fromkeys(all_html_list).keys())
-        # list of stylesheets
+    # list of stylesheets
-        all_style_list = []
+    all_style_list = []
-        file_patterns = ['html_html', 'html_style']
+    file_patterns = ['html_html', 'html_style']
-        # get html and css files called from within templates
+    # get html and css files called from within templates
-        i = 0
+    i = 0
-        while i < len(uniq_html_list):
+    while i < len(uniq_html_list):
-            template_name = uniq_html_list[i]
+        template_name = uniq_html_list[i]
-            try:
+        try:
-                # a dict containing 'html' and 'css' files
+            # a dict containing 'html' and 'css' files
-                temp_files = templates_match_pattern(
+            temp_files = templates_match_pattern(
-                    template_name, file_patterns
+                template_name, file_patterns
-                )
+            )
-            except template.exceptions.TemplateDoesNotExist as e:
+        except template.exceptions.TemplateDoesNotExist as e:
-                print("template file not found: ", str(e))
+            print("template file not found: ", str(e))
-                all_html_list = [
+            all_html_list = [
-                    h for h in all_html_list if h != template_name
+                h for h in all_html_list if h != template_name
-                ]
+            ]
-                del uniq_html_list[i]
+            del uniq_html_list[i]
-            else:
+        else:
-                all_html_list.extend(temp_files[0])
+            all_html_list.extend(temp_files[0])
-                uniq_html_list = list(
+            uniq_html_list = list(
-                    OrderedDict.fromkeys(all_html_list).keys()
+                OrderedDict.fromkeys(all_html_list).keys()
-                )
+            )
-                all_style_list.extend(temp_files[1])
+            all_style_list.extend(temp_files[1])
-                i += 1
+            i += 1
-        # counter dict for the html files called from view
+    # counter dict for the html files called from view
-        result = {
+    result = {
-            'html': Counter(all_html_list),
+        'html': Counter(all_html_list),
-            'style': Counter(all_style_list)
+        'style': Counter(all_style_list)
-        }
+    }
-        print(result)
+    print(result)
-        return result
+    return result
 
-    def get_selectors_css(self, files):
-        selectors = {}
-        for file in files:
-            if any(vendor in file for vendor in ['bootstrap', 'font-awesome']):
-                continue
-            result = finders.find(file)
-            if result:
-                selectors[file] = file_match_pattern(
-                    result, ['css_selector']
-                )[0]
-        return selectors
 
-    def get_selectors_html(self, files):
+def get_selectors_css(files):
-        selectors = {}
+    selectors = {}
-        for file in files:
+    media_selectors = {}
-            results = templates_match_pattern(file, ['html_class', 'html_id'])
+    for file in files:
+        if any(vendor in file for vendor in ['bootstrap', 'font-awesome']):
+            continue
+        result = finders.find(file)
+        if result:
+            with open(result) as f:
+                data = f.read()
+            media_selectors[file] = string_match_pattern(
+                data, 'css_media'
+            )
+            new_data = string_replace_pattern(
+                data, 'css_media'
+            )
             selectors[file] = {
-                'class': results[0],
+                'default': string_match_pattern(
-                'id': results[0],
+                    new_data, 'css_selector'
+                )
             }
-        return selectors
+    # pp = pprint.PrettyPrinter(compact=False, width=120)
+    # pp.pprint(media_selectors)
 
-    def selectors_css(self, results, filename='frontend'):
+    for file, match_list in media_selectors.items():
-        full_filename = '../optimize_' + filename + '.csv'
+        for match in match_list:
-        output_file = os.path.join(
+            query = match[0]
-            settings.PROJECT_DIR, full_filename
+            block_text = ' '.join(match[1].split())
-        )
+            results = string_match_pattern(
-        with open(output_file, 'w', newline='') as f:
+                block_text, 'css_selector'
-            w = csv.writer(f)
+            )
-            print(zip_longest(*results))
+            f_query = ' '.join(query.replace(':', ': ').split())
-            for r in zip_longest(*results):
+            if f_query in selectors[file]:
-                w.writerow(r)
+                selectors[file][f_query].extend(results)
+            else:
+                selectors[file][f_query] = results
+    # pp.pprint(selectors)
+    return selectors
+
+
+def get_selectors_html(files):
+    selectors = {}
+    for file in files:
+        results = templates_match_pattern(file, ['html_class', 'html_id'])
+        selectors[file] = {
+            'class': results[0],
+            'id': results[1],
+        }
+    return selectors
 
 
 def file_match_pattern(file, patterns):
-    results = []
     with open(file) as f:
         data = f.read()
-    for p in patterns:
+    results = string_match_pattern(data, patterns)
-        results.append(
-            re.findall(re.compile(RE_PATTERNS[p], re.MULTILINE), data)
-        )
     return results
 
 
+def string_match_pattern(data, patterns):
+    if not isinstance(patterns, str):
+        results = []
+        for p in patterns:
+            re_pattern = re.compile(RE_PATTERNS[p], re.MULTILINE)
+            results.append(re.findall(re_pattern, data))
+    else:
+        re_pattern = re.compile(RE_PATTERNS[patterns], re.MULTILINE)
+        results = re.findall(re_pattern, data)
+    return results
+
+
+def string_replace_pattern(data, patterns):
+    if not isinstance(patterns, str):
+        for p in patterns:
+            re_pattern = re.compile(RE_PATTERNS[p], re.MULTILINE)
+            data = re.sub(re_pattern, '', data)
+    else:
+        re_pattern = re.compile(RE_PATTERNS[patterns], re.MULTILINE)
+        data = re.sub(re_pattern, '', data)
+    return data
+
+
 def templates_match_pattern(template_name, patterns):
     t = template.loader.get_template(template_name)
     data = t.template.source
-    results = []
+    results = string_match_pattern(data, patterns)
-    for p in patterns:
-        results.append(
-            re.findall(re.compile(RE_PATTERNS[p], re.MULTILINE), data)
-        )
     return results
 
 
+def get_css_duplication(css_selectors):
+    # duplicate css selectors in stylesheets
+    for file in css_selectors:
+        print(file)
+        for media in css_selectors[file]:
+            print(' '.join(media.replace(':', ': ').split()))
+            print(len(css_selectors[file][media]), 'rules')
+        # for selector in selectors:
+        #     if selector[0] in count:
+        #         count[selector[0]] += 1
+        #         # print(file, selector[0], count[selector[0]])
+        #     else:
+        #         count[selector[0]] = 1
+
+
+def write_report(results, filename='frontend'):
+    full_filename = '../optimize_' + filename + '.csv'
+    output_file = os.path.join(
+        settings.PROJECT_DIR, full_filename
+    )
+    with open(output_file, 'w', newline='') as f:
+        w = csv.writer(f)
+        print(zip_longest(*results))
+        for r in zip_longest(*results):
+            w.writerow(r)
+
+
 html_tags = [
     "a",
     "abbr",
@@ -280,6 +337,6 @@ html_tags = [
     "wbr"
 ]
 
-exempt_classes = [
+bootstrap_classes = [
     "active",
 ]