Side nav (cfug#524)

* new sidebar * WIP * create the directory if it does not exist * fix bug * fix side nav * fix clipping * tweaks from review * create a new item for sidebar
AmosHuKe · Apr 27, 2017 · 010c0ec · 010c0ec
1 parent 839e2ca
commit 010c0ec
Show file tree

Hide file tree

Showing 25 changed files with 285 additions and 565 deletions.
diff --git a/_data/sidebars/home_sidebar.yml b/_data/sidebars/home_sidebar.yml
diff --git a/_includes/custom/sidebarconfigs.html b/_includes/custom/sidebarconfigs.html
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,7 +1,8 @@
 <header class="site-header">
- <div class="container">
+ <div class="container-fluid header-contents">
  <div class="row">
  <div class="col-md-12">
+ <i class="fa fa-bars" id="sidebar-toggle-button" aria-hidden="true" style="display:none"></i>
  <img src="/images/flutter-mark-square-100.png" alt="Flutter Logo" width="40" height="40" style="vertical-align:middle">
 
  <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>

diff --git a/_includes/navigation-sub.html b/_includes/navigation-sub.html
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,39 +1,59 @@
-{% include custom/sidebarconfigs.html %}
-
-<ul id="mysidebar" class="nav affix">
- <li class="sidebarTitle">{{sidebar[0].product}} {{sidebar[0].version}}</li>
- {% for entry in sidebar %}
- {% for folder in entry.folders %}
- {% if folder.output contains "web" %}
- {% if folder.external_url %}
- <li>
- <a href="{{folder.external_url}}" target="_blank">{{ folder.title }}</a>
- </li>
- {% elsif folder.spacer %}
- <br>
- {% else %}
- <li>
- <a href="{{folder.url}}">{{ folder.title }}</a>
-
- {% if folder.folderitems %}
- <ul style="display:none">
- {% for folderitem in folder.folderitems %}
- {% if folderitem.output contains "web" %}
- {% if folderitem.external_url %}
- <li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
- {% elsif page.url == folderitem.url %}
- <li class="active"><a href="{{folderitem.url}}">{{folderitem.title}}</a></li>
- {% else %}
- <li><a href="{{folderitem.url}}">{{folderitem.title}}</a></li>
- {% endif %}
- {% endif %}
- {% endfor %}
- </ul>
- {% endif %}
- </li>
- {% endif %}
-
- {% endif %}
- {% endfor %}
- {% endfor %}
+<ul id="mysidebar" class="nav">
+
+ <li class="sidebar-title">Get started</li>
+
+ <ul class="sidebar-items">
+ <li><a href="/setup/">Install</a></li>
+ <li><a href="/getting-started/">Create and run your first app</a></li>
+ <li><a href="/bootstrap-into-dart/">Bootstrap into Dart</a></li>
+
+ </ul>
+
+ <li class="sidebar-title">Build UIs</li>
+
+ <ul class="sidebar-items">
+ <li><a href="/widgets-intro/">Tour the framework</a></li>
+ <li><a href="/widgets/">Widget catalog</a></li>
+ <li><a href="/tutorials/layout/">Build Layouts - Tutorial</a></li>
+ <li><a href="/tutorials/interactive/">Add Interactivity - Tutorial</a></li>
+ <li><a href="/web-analogs/">HTML/CSS patterns</a></li>
+ <li><a href="/gestures/">Gestures</a></li>
+ <li><a href="/animations/">Animations</a></li>
+ <li><a href="/custom-fonts/">Custom fonts</a></li>
+ <li><a href="/layout/">Box constraints</a></li>
+ <li><a href="/assets-and-images/">Assets and images</a></li>
+ <li><a href="/text-input/">Text input</a></li>
+ </ul>
+
+
+ <li class="sidebar-title">Use device and SDK APIs</li>
+
+ <ul class="sidebar-items">
+ <li><a href="/platform-plugins/">Plugins &amp; platform-specific code</a></li>
+ <li><a href="/platform-channels/">Custom platform-specific code</a></li>
+ <li><a href="/reading-writing-files/">Read and write files</a></li>
+ <li><a href="/networking/">Network and HTTP</a></li>
+ </ul>
+
+
+ <li class="sidebar-title">Test, deploy, workflows</li>
+
+ <ul class="sidebar-items">
+ <li><a href="/testing/">Test your app</a></li>
+ <li><a href="/debugging/">Debug your app</a></li>
+ <li><a href="/formatting/">Format your source code</a></li>
+ <li><a href="/intellij-ide/">Use IntelliJ IDE</a></li>
+ <li><a href="/android-release/">Build and release for Android</a></li>
+ <li><a href="/ios-release/">Build and release for iOS</a></li>
+ <li><a href="/upgrading/">Upgrade your Flutter install</a></li>
+ </ul>
+
+ <li class="sidebar-title">Advanced topics</li>
+
+ <ul class="sidebar-items">
+ <li><a href="https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit?usp=sharing">Architecture diagrams</a></li>
+ <li><a href="https://www.youtube.com/watch?v=dkyY9WCGMi0">Framework's layered design <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
+ <li><a href="https://www.youtube.com/watch?v=UUfXWzp0-DU">Flutter's rendering pipeline <i class="fa fa-video-camera" aria-hidden="true"></i></a></li>
+ </ul>
+
 </ul>
diff --git a/_layouts/code_comp_page.html b/_layouts/code_comp_page.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 <head> 
-  <link rel="stylesheet" href="../css/two_column.css">
+ <link rel="stylesheet" href="../css/two_column.css">
 </head>
 <header>
 <div class="post">

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,19 +3,23 @@
  {% include head.html %}
 
  <body>
+
+ <div id="overlay-under-drawer"><!-- for the drawer on narrow screens --></div>
+
  {% include header.html %}
 
  <!-- Page Content -->
- <div class="container contents">
+ <div class="container-fluid contents">
  <!-- Content Row -->
  <div class="row">
+
  <!-- Sidebar Column -->
- <div class="col-md-3">
+ <div id="side-nav-container" class="col-sm-3">
  {% include sidebar.html %}
  </div>
 
  <!-- Content Column -->
- <div class="col-md-9">
+ <div class="col-sm-9 main-contents">
  {{content}}
  </div>
  </div> <!-- /.row -->
@@ -29,10 +33,10 @@
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/2.0.0/anchor.min.js"></script>
+ <script src="{{ "/js/sidebar_toggle.js" }}"></script>
+ <script src="{{ "/js/customscripts.js" }}"></script>
  <script src="{{ "/js/prism.js" }}"></script>
  <script src="{{ "/js/toc.js" }}"></script>
- <script src="{{ "/js/jquery.navgoco.min.js" }}"></script>
- <script src="{{ "/js/customscripts.js" }}"></script>
 
  <script async="" defer="" src="//survey.g.doubleclick.net/async_survey?site=at3ul57xpub2vk3oxt2ytw365i"></script>
  </body>

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -2,13 +2,9 @@
 layout: default
 ---
 
-<div class="post">
- <header class="post-header">
- {% include navigation-sub.html %}
- <h1 class="post-title">{{ page.title }}</h1>
- </header>
- <article class="post-content">
- {{ content }}
- </article>
- {% include navigation-sub.html %}
-</div>
+<header class="post-header">
+ <h1 class="post-title">{{ page.title }}</h1>
+</header>
+<article class="post-content">
+ {{ content }}
+</article>