Created app

.anvil_editor.yaml

@@ -0,0 +1,8 @@
+unique_ids:
+  forms:
+    Form1: K7KYGTN4TZZMCZKWSRANBG4LKWGRG4M6
+  modules: {}
+  server_modules: {}
+  assets:
+    theme.css: K6MR757PJ3BWZ3EPCLMJOM7PDMJXBJNV
+    standard-page.html: UB44DRJDLSYQ3KGIPERLNU7NQ3AEDEAQ

.gitignore

@@ -0,0 +1,4 @@
+*.pyc
+*.pyo
+__pycache__
+.anvil-data

__init__.py

@@ -0,0 +1,7 @@
+#
+# This repository is an Anvil app. Learn more at https://anvil.works/
+# To run the server-side code on your own machine, run:
+# pip install anvil-uplink
+# python -m anvil.run_app_via_uplink YourAppPackageName
+
+__path__ = [__path__[0] + "/server_code", __path__[0] + "/client_code"]

anvil.yaml

@@ -0,0 +1,8 @@
+allow_embedding: false
+package_name: M3_App_2
+name: M3 App 2
+startup_form: Form1
+renamed: true
+runtime_options: {version: 2, client_version: '3', server_version: python3-full, server_spec: null}
+dependencies: []
+services: []

client_code/Form1/__init__.py

@@ -0,0 +1,9 @@
+from ._anvil_designer import Form1Template
+from anvil import *
+
+class Form1(Form1Template):
+  def __init__(self, **properties):
+    # Set Form properties and Data Bindings.
+    self.init_components(**properties)
+
+    # Any code you write here will run before the form opens.

client_code/Form1/form_template.yaml

@@ -0,0 +1,14 @@
+is_package: true
+container:
+  type: HtmlTemplate
+  properties: {html: '@theme:standard-page.html'}
+components:
+- type: ColumnPanel
+  properties: {col_widths: '{}'}
+  name: content_panel
+  layout_properties: {slot: default}
+  components: []
+- type: FlowPanel
+  properties: {}
+  name: navbar_links
+  layout_properties: {slot: nav-right}

theme/assets/standard-page.html

@@ -0,0 +1,127 @@
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" rel="preload" as="font" crossorigin="anonymous">
+
+<div class="structure">
+  <div class="app-bar" anvil-drop-container=".anvil-container" anvil-drop-redirect=".placeholder">
+    <a class="sidebar-toggle" anvil-if-slot-empty="top-left-btn" anvil-hide-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn" href="javascript:void(0)"><i class="fa fa-bars"></i></a>
+    <a class="sidebar-toggle anvil-designer-only" anvil-if-slot-empty="top-left-btn" anvil-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn"><i class="fa fa-blank"></i></a>
+    <div class="top-left-btn" anvil-slot="top-left-btn"></div>
+    <div class="title" anvil-slot="title">
+      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="title" anvil-drop-here>Drop title here</div>
+    </div>
+    <div class="app-bar-nav" anvil-slot="nav-right">
+      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="nav-right" anvil-drop-here>Drop a FlowPanel here</div>
+    </div>
+    <div style="clear:both"></div>
+  </div>
+
+  <div class="nav-holder">
+    <div class="left-nav anvil-measure-this" anvil-slot-repeat="left-nav" anvil-drop-container=">.anvil-container">
+    </div>
+    <div class="left-nav-placeholder anvil-designer-only" anvil-if-slot-empty="left-nav" anvil-drop-slot="left-nav">
+      <div class="prompt">To add a sidebar, drop a ColumnPanel here.</div>
+    </div>
+
+    <div class="content">
+      <div anvil-slot-repeat="default" class="anvil-measure-this"></div>
+      <div class="placeholder drop-here" anvil-if-slot-empty="default" anvil-drop-slot="default">Drop a ColumnPanel here.</div>
+    </div>
+  </div>
+
+  <div class="nav-shield"></div>
+</div>
+<div anvil-drop-default anvil-drop-redirect=".placeholder" anvil-drop-container=".anvil-container"></div>
+
+<script>
+  var ln = $('.structure > .nav-holder > .left-nav');
+  var lnp = $('.structure > .nav-holder > .left-nav-placeholder');
+  var appBar = $('.app-bar')[0];
+
+  function hideSidebar() {
+    ln.animate({left: -ln.outerWidth()}, function() {
+      ln.removeClass("in-transition shown").addClass("hidden");
+      $('.nav-shield').removeClass("shown");
+      $(window).trigger('resize');
+    });
+    if (window.innerWidth > 998) { 
+      $('.content').animate({'margin-left':0}, function(){})
+    }
+  }
+
+  function showSidebar() {
+    $('.nav-shield').addClass("shown");
+    ln.addClass("shown").removeClass("hidden").css({left: "-100%"}).css({left: -ln.outerWidth()}).animate({left: 0}, function() {
+      ln.removeClass("in-transition");
+    });
+    $(window).trigger('resize');
+    if (window.innerWidth > 998) {
+      $('.content').animate({'margin-left': ln.outerWidth().toString() + 'px'}, function(){})
+    } 
+  }
+
+  $('.sidebar-toggle, .nav-shield').off('click').on('click', function() { 
+    if (ln.is(":visible") || $('.nav-shield').is(".shown")) {
+      hideSidebar();
+    } else if(!ln.is(":empty")) {
+      showSidebar();
+    }
+  });
+  $('.left-nav').off('click').on('click', 'a, button', function() {
+    if ($('.nav-shield').is(":visible")) {
+      $('.nav-shield').trigger('click');
+    }
+  });
+
+  document.addEventListener('scroll', function(event) {
+    if (appBar.classList.contains('scrolled')) {
+      if (window.scrollY === 0) {
+        appBar.classList.remove('scrolled')
+    	} 
+    }
+    else {
+      appBar.classList.add('scrolled')
+    }
+  });
+
+  function addMarginToContent() {
+    //check if there is a free banner and set the top margin accordiningly
+    if ($('#anvil-header').css('display') == 'block') {
+      var topMargin = appBar.clientHeight + 50
+    } else {
+      var topMargin = appBar.clientHeight
+    }
+    //the left-nav-placeholder in the designer needs to shift down for the app bar
+    lnp.css({'top': appBar.clientHeight.toString() + 'px'})
+
+    //if the window is small
+    if (window.innerWidth < 999) {
+      //if in Anvil designer
+      if (window.anvilInDesigner) {
+        //add left margin to content to make room for left-nav or left-nav-placeholder
+        $('.content').css({'margin-left': Math.max(ln.outerWidth(), lnp.outerWidth()).toString() + 'px'});
+        $('.content').css({'margin-top': appBar.clientHeight.toString() + 'px'})
+        ln.css({'top': topMargin.toString() + 'px'})
+      } else {
+        //if not in Anvil designer, content gets no left margin because left-nav will be a modal overlay
+        $('.content').css({'margin-left': '0px'});
+        ln.css({'top': '0px'})
+        //add top margin to content
+        $('.content').css({'margin-top': topMargin.toString() + 'px'});
+      }
+    } else {
+      //if the window is big, add margin to content and left-nav for app bar
+      $('.content').css({'margin-top': appBar.clientHeight.toString() + 'px'});
+      ln.css({'top': topMargin.toString() + 'px'})
+      if (window.anvilInDesigner) {
+        //if in the designer, add left margin for either the left-nav or the placeholder
+        $('.content').css({'margin-left': Math.max(ln.outerWidth(), lnp.outerWidth()).toString() + 'px'});
+      } else {
+        //if not in the designer, only add margin for the left-nav because placeholder still has a width outside of designer
+        $('.content').css({'margin-left': ln.outerWidth() + 'px'});
+      }
+    }
+  }
+
+  addMarginToContent()
+  window.addEventListener('resize', addMarginToContent);
+
+</script>