Challenge: Working with the MIS2402 Template

Transcription

1 Challenge: Working with the MIS2402 Template In this challenge we will see how the appearance of the MIS2402 template can be modified. Start by downloading mis2402template04.zip and setting up a corresponding folder in your workspace. Before you begin, there are three files in this template that you should need to be familiar with. File index.html js/app.js css/app.css Purpose The main file of you application. All presentation is delivered through this file. This file contains JavaScript and jquery written by you. If you edit any JavaScript in this template, your edits should go here. This file contains CSS written by you. Later in this challenge you will discover one more place where you might make a CSS related edit but, for the most part, all your custom CSS goes here. Step 1 Change the start page It would be nice if the first content seen by the user was the login form. Open app.js and find the section that controls this. Find this text: /* this reveals the default page */ $("#wrapper001").show(); $("a[href='#wrapper001']").parent("li").addclass("active"); And change it so that #wrapperlogin is displayed by default instead. Test your work. NOTE: The MIS2402 template is an example of a Single Page Architecture (SPA). It is called that because the entire user interface is stored in one page: index.html. When a user clicks on a navigation link, it might appear to the user that a different page is being displayed, but what is really happening is this: one content wrapper div is being hidden and another is being shown. As we move through this document, we may casually speak of displaying the login page or the Quote of the Day page. This is not technically precise language, as those interfaces are really all in one page: index.html. Step 2 Clean up the navigation Now return to index.html. Find this section of the code that controls the presentation of the navigation links. <!-- Sidebar Menu --> <ul class="sidebar-menu" data-widget="tree"> <li class="header">navigation</li> <!-- Optionally, you can add icons to the links -->

2 <li ><a href="#wrapper001" class="mis2402navlink"><i class="fa falink"></i> <span>link 001</span></a></li> <li ><a href="#wrapper004" class="mis2402navlink"><i class="fa falink"></i> <span>link 004</span></a></li> <li ><a href="#wrapperlogin" class="mis2402navlink"><i class="fa falink"></i> <span>login</span></a></li> <li ><a href="#wrapperregister" class="mis2402navlink"><i class="fa falink"></i> <span>register</span></a></li> <li ><a href="#wrapperquote" class="mis2402navlink"><i class="fa falink"></i> <span>quote of the Day</span></a></li> </ul> Edit this code so that only the Login link and the Quote of the day link remain. <!-- Sidebar Menu --> <ul class="sidebar-menu" data-widget="tree"> <li class="header">navigation</li> <!-- Optionally, you can add icons to the links --> <li ><a href="#wrapperlogin" class="mis2402navlink"><i class="fa falink"></i> <span>login</span></a></li> <li ><a href="#wrapperquote" class="mis2402navlink"><i class="fa falink"></i> <span>quote of the Day</span></a></li> </ul> ALSO: Remove the wrapper divs that correspond to what we just removed from the navigation. NOTE: Why would we do that? Well, we don t want that content any more, and we don t want our index.html page to be bigger than it has to be, and this is a pretty easy edit. We re not really changing the template here, just throwing out content wrappers that aren t going to be used. Step 3 Create a new link and content-wrapper Now that you have seen the relationship between the navigation links, and the wrapper div tags, it should be clear how to add a new wrapper div. Add a Change Calculator menu option and a corresponding wrapper div. For now, the content of the Change Calculator wrapper div can simply be Under Construction NOTE: After you do this, it would be smart to test your work. Can you navigate from page to page? Does everything look ok?

3 Step 4 Change the icons Notice the following comment in the navigation section. <!-- Sidebar Menu --> <ul class="sidebar-menu" data-widget="tree"> <li class="header">navigation</li> <!-- Optionally, you can add icons to the links --> <li ><a href="#wrapperlogin" class="mis2402navlink"><i class="fa falink"></i> <span>login</span></a></li> <li ><a href="#wrapperquote" class="mis2402navlink"><i class="fa falink"></i> <span>quote of the Day</span></a></li> <li ><a href="#wrapperchange" class="mis2402navlink"><i class="fa falink"></i> <span>change Calculator</span></a></li> </ul> <!-- /.sidebar-menu --> Visit the website Find the icons for a user, a quote, and money. Change the links in the navigation based on what you find. HINT: The tag for money is <i class="fa fa-money"></i> When you re done, the navigation links should look like this:

4 NOTE: FontAwesome is pretty neat. There are hundreds of free icons available to you there. You should consider using it in the future. Step 5 Change the placement of the navigation The MIS2402template can be used in a variety of ways. Instead of a navigation menu on the left hand side of the menu, we can re-locate the navigation options to the top of the page as shown below. Here s how to do it. 1. Edit the CSS classes applied to the <body> tag. Change sidebar-mini to sidebar-collapsed So: <body class="hold-transition skin-red sidebar-mini"> Becomes: <body class="hold-transition skin-red sidebar-collapse"> Stop and test. Observe the effect of this change. 2. Copy the navigation links in the Sidebar Menu to the NavBar Right Menu. See the <ul> list tag that begins on line Hide the hamburger menu icon that appears next to MIS2402 with CSS. Find css/app.css and add this line: a.sidebar-toggle{ display: none; } How did we know to do that? We found that tag and class with the Google Developer Tools and the Inspect Code option. Step 6 Change the color scheme If you don t like the color scheme, you can change it. There are two lines to edit. One is the <body> tag on line 75. The other is the <link> tag found on line 28. Pick a color scheme (a.k.a. a skin ) that you like. Your choices are skin-blue, skin-black, skin-purple, skin-yellow, skin-red, skin-green.

5 Step 7 Add your own color scheme If you don t like any of the pre-defined color schemes, you can make your own. Sadly, there is no skincherry so we should probably make one. 1. Go find this folder: dist/css/skins 2. Open skin-red.css and save it as skin-cherry.css. 3. Search for skin-red and replace all occurrences with skin-cherry 4. Using Visual Studio Code, search and replace these color codes: a. Replace dd4b39 with a41e35 b. Replace d73925 with 8c To make it extra pretty, add one bit of CSS to the top of the skin-cherry.css /* * Skin: Cherry * */.box.box-warning{ } border-top-color: #a41e35; 6. Now that skin-cherry exists, go back to index.html and use it! It should look like this: NOTE: This line was colored by the extra pretty style we added in the previous step!

6 MORE NOTES: We re using hexadecimal colors here. There are many utilities on the internet that can help you find a color code. Here s just one such resource: The official Temple Cherry colors we are using were defined here: Most large organizations have formal color and design guidelines like this. Q: What are those something.min.css files? A: Those are minified files. Minified files are text files that have gone through the process of minification. According the Google Developer resources Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. So, basically, minified files have been made smaller by removing anything that a computer does not need to interpret them. Things that human beings, need thing like white space and line breaks and comments. Step 8 On your own Now that you have created your own theme, integrate your change calculator code with the bootstrap template. Be sure to put your HTML in the wrapper div you created, and put your JavaScript and jquery in app.js. If you need any custom css other than the skin, put it in css/app.css. Here s a sample solution: Upload your work when you are done.