Merge pull request #5 from jupytercon/layout_tutorial_updates

small enhancements to layout and styling tutorial

Author: mbektas

notebooks/03.Layout-and-Styling/03.01-widget-layout-and-styling.ipynb

@@ -1,13 +1,5 @@
 {
  "cells": [
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "<!--NAVIGATION-->\n",
-    "< [Contents](03.00-layout-and-styling-overview.ipynb) | [*OPTIONAL* - Widget label styling](03.02-OPTIONAL-widget-label-styling.ipynb) >"
-   ]
-  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -23,15 +15,13 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "## The `layout` attribute.\n",
+    "## The `layout` attribute\n",
     "\n",
     "Jupyter interactive widgets have a `layout` attribute exposing a number of CSS properties that impact how widgets are laid out.\n",
     "\n",
-    "### Exposed CSS properties\n",
+    "### CSS properties exposed with `layout` attribute\n",
     "\n",
-    "<div class=\"alert alert-info\" style=\"margin: 20px\">\n",
     "The following properties map to the values of the CSS properties of the same name (underscores being replaced with dashes), applied to the top DOM elements of the corresponding widget.\n",
-    "</div>\n",
     "\n",
     "\n",
     "#### Sizes\n",
@@ -64,7 +54,7 @@
     "- `bottom`\n",
     "- `right`\n",
     "\n",
-    "#### Image/media\n",
+    "#### Image / media\n",
     "\n",
     "- `object_fit`\n",
     "- `object_position`\n",
@@ -189,7 +179,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "b2.style.button_color = 'yellow'"
+    "b2.style.button_color = 'orange'"
    ]
   },
   {
@@ -239,8 +229,8 @@
    "outputs": [],
    "source": [
     "from ipywidgets import IntSlider\n",
-    "s1 = IntSlider(description='Blue handle')\n",
-    "s1.style.handle_color = 'lightblue'\n",
+    "s1 = IntSlider(description='Red handle')\n",
+    "s1.style.handle_color = 'red'\n",
     "s1"
    ]
   },
@@ -349,6 +339,7 @@
     "    \"\"\"Displays multiple widgets horizontally using the flexible box model.\"\"\"\n",
     "    box = Box(*pargs, **kwargs)\n",
     "    box.layout.display = 'flex'\n",
+    "    box.layout.flex_flow = 'row'\n",
     "    box.layout.align_items = 'stretch'\n",
     "    return box\n",
     "```\n",
@@ -380,10 +371,10 @@
    "source": [
     "from ipywidgets import Layout, Button, Box\n",
     "\n",
-    "items_layout = Layout(width='auto')     # override the default width of the button to 'auto' to let the button grow\n",
+    "items_layout = Layout(width='auto') # override the default width of the button to 'auto' to let the button grow\n",
     "\n",
     "box_layout = Layout(display='flex',\n",
-    "                    flex_flow='column',  \n",
+    "                    flex_flow='column',\n",
     "                    align_items='stretch', \n",
     "                    border='solid',\n",
     "                    width='50%')\n",
@@ -410,9 +401,9 @@
     "from ipywidgets import Layout, Button, HBox\n",
     "\n",
     "items = [\n",
-    "    Button(description='weight=1; 0%', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
-    "    Button(description='weight=3; 0%', layout=Layout(flex='3 1 0%', width='auto'), button_style='danger'),\n",
-    "    Button(description='weight=1; 0%', layout=Layout(flex='1 1 0%', width='auto'), button_style='danger'),\n",
+    "    Button(description='weight=1', layout=Layout(flex='1', width='auto'), button_style='danger'),\n",
+    "    Button(description='weight=3', layout=Layout(flex='3', width='auto'), button_style='danger'),\n",
+    "    Button(description='weight=1', layout=Layout(flex='1', width='auto'), button_style='danger'),\n",
     "]\n",
     "box_layout = Layout(align_items='stretch', width='70%')\n",
     "HBox(children=items, layout=box_layout)"
@@ -737,7 +728,7 @@
    "source": [
     "from ipywidgets import Layout, Button, Box\n",
     "\n",
-    "items_layout = Layout(width='auto')     # override the default width of the button to 'auto' to let the button grow\n",
+    "items_layout = Layout(width='auto') # override the default width of the button to 'auto' to let the button grow\n",
     "\n",
     "box_layout = Layout(display='flex',\n",
     "                    flex_flow='column',  \n",
@@ -877,7 +868,6 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# Utils widgets\n",
     "from ipywidgets import Button, Layout, jslink, IntText, IntSlider\n",
     "\n",
     "def create_expanded_button(description, button_style):\n",
@@ -1430,15 +1420,15 @@
     "            scatt = bq.Scatter(x=data[:, j], y=data[:, i], scales={'x': sc_x, 'y': sc_y})\n",
     "\n",
     "            gs[i, j] = bq.Figure(marks=[scatt], layout=Layout(width='auto', height='auto'),\n",
-    "                                 fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#f5f5ff'})\n",
+    "                                 fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#e5e5ff'})\n",
     "        else:\n",
     "            sc_x = scales_x[j]\n",
     "            sc_y = bq.LinearScale()\n",
     "        \n",
     "            hist = bq.Hist(sample=data[:,i], scales={'sample': sc_x, 'count': sc_y})\n",
     "            \n",
     "            gs[i, j] = bq.Figure(marks=[hist], layout=Layout(width='auto', height='auto'),\n",
-    "                                 fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#f5f5ff'})\n",
+    "                                 fig_margin=dict(top=5, bottom=5, left=5, right=5), background_style={'fill':'#e5e5ff'})\n",
     "gs"
    ]
   },
@@ -1477,7 +1467,7 @@
     "        layout=Layout(\n",
     "            width='50%',\n",
     "            grid_template_columns='100px 50px 100px',\n",
-    "            grid_template_rows='80px auto 80px', \n",
+    "            grid_template_rows='80px auto 80px',\n",
     "            grid_gap='5px 10px')\n",
     "       )"
    ]
@@ -1534,13 +1524,13 @@
     "                 style=ButtonStyle(button_color='lightblue'))\n",
     "main    = Button(description='Main',\n",
     "                 layout=Layout(width='auto', height='auto', grid_area='main'),\n",
-    "                 style=ButtonStyle(button_color='moccasin'))\n",
+    "                 style=ButtonStyle(button_color='lightgray'))\n",
     "sidebar = Button(description='Sidebar',\n",
     "                 layout=Layout(width='auto', height='auto', grid_area='sidebar'),\n",
     "                 style=ButtonStyle(button_color='salmon'))\n",
     "footer  = Button(description='Footer',\n",
     "                 layout=Layout(width='auto', height='auto', grid_area='footer'),\n",
-    "                 style=ButtonStyle(button_color='olive'))\n",
+    "                 style=ButtonStyle(button_color='orange'))\n",
     "\n",
     "GridBox(children=[header, main, sidebar, footer],\n",
     "        layout=Layout(\n",
@@ -1577,7 +1567,7 @@
    "metadata": {},
    "source": [
     "<!--NAVIGATION-->\n",
-    "< [Layout and Styling of Jupyter widgets](03.00-layout-and-styling-overview.ipynb) | [*OPTIONAL* - Widget label styling](03.02-OPTIONAL-widget-label-styling.ipynb) >"
+    "< [Contents](03.00-layout-and-styling-overview.ipynb) | [*OPTIONAL* - Widget Label Styling](03.02-OPTIONAL-widget-label-styling.ipynb) >"
    ]
   }
  ],