Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T05:08:51Z

Garadhy: /* References */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

The content of the page is wrapped under new div with class "container".
<pre>
<div class="container" style="position: relative; margin-top: -30px; left: 43px;">
</pre>

Also, the bootstrap tutorial shows that <nav> tag should be used for the navigation menu instead of div. Also that class "navbar-fixed-top" is changed to "navbar-static-top" as per standard bootstrap rules.

<pre>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
</nav>
</pre>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

== References ==
[http://www.w3schools.com/bootstrap/bootstrap_navbar.asp W3Schools Tutorial on Bootstrap] 
[http://www.w3schools.com/css/ W3Schools CSS Tutorial]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T05:08:32Z

Garadhy: /* References */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

The content of the page is wrapped under new div with class "container".
<pre>
<div class="container" style="position: relative; margin-top: -30px; left: 43px;">
</pre>

Also, the bootstrap tutorial shows that <nav> tag should be used for the navigation menu instead of div. Also that class "navbar-fixed-top" is changed to "navbar-static-top" as per standard bootstrap rules.

<pre>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
</nav>
</pre>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

=== References ===
[http://www.w3schools.com/bootstrap/bootstrap_navbar.asp W3Schools Tutorial on Bootstrap] 
[http://www.w3schools.com/css/ W3Schools CSS Tutorial]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T05:08:19Z

Garadhy: /* Test Results */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

The content of the page is wrapped under new div with class "container".
<pre>
<div class="container" style="position: relative; margin-top: -30px; left: 43px;">
</pre>

Also, the bootstrap tutorial shows that <nav> tag should be used for the navigation menu instead of div. Also that class "navbar-fixed-top" is changed to "navbar-static-top" as per standard bootstrap rules.

<pre>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
</nav>
</pre>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

=== References ===
[http://www.w3schools.com/bootstrap/bootstrap_navbar.asp W3Schools Tutorial on Bootstrap]
[http://www.w3schools.com/css/ W3Schools CSS Tutorial]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T05:04:19Z

Garadhy: /* Implementation */

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T05:02:18Z

Garadhy: /* Pushing content down */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

The content of the page is wrapped under new div with class "container".
<pre>
<div class="container" style="position: relative; margin-top: -30px; left: 43px;">
</pre>

Also, the bootstrap tutorial shows that <nav> tag should be used for the navigation menu instead of div. Also that class "navbar-fixed-top" is changed to "navbar-static-top" as per standard bootstrap rules.

<pre>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
</nav>
</pre>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T05:00:22Z

Garadhy: /* Pushing content down */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

Also, the bootstrap tutorial shows that <nav> tag should be used for the navigation menu instead of div. Also that class "navbar-fixed-top" is changed to "navbar-static-top" as per standard bootstrap rules.

<pre>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
</nav>
</pre>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:59:51Z

Garadhy: /* Pushing content down */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

Also, the bootstrap tutorial shows that <nav> tag should be used for the navigation menu. Also that class "nabber-fixed-top" is changed to "nabber-static-top" as per standard bootstrap rules.

<pre>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
</nav>
</pre>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:59:19Z

Garadhy: /* Pushing content down */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

Also, the bootstrap tutorial shows that <nav> tag should be used for the navigation menu. Also that class "nabber-fixed-top" is changed to "nabber-static-top" as per standard bootstrap rules.

<nav role="navigation" class="navbar navbar-default navbar-static-top">
</nav>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:56:13Z

Garadhy: /* Pushing content down */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:55:54Z

Garadhy: /* Pushing content down */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

</script>
$(function() {
$('button.navbar-toggle').click(function() {
if ($('.container').css('margin-top') === '-30px') {
$('.container').css('margin-top', '+=600');
} else {
$('.container').css('margin-top', '-30px');
}
});
});
</script>

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:55:05Z

Garadhy: /* Shifting menu icon to the left on re-sizing */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:54:44Z

Garadhy: /* Shifting menu icon to the left on re-sizing */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

=== Pushing content down ===

When the menu button is clicked, earlier the content in the page would stay behind the menu and user could not see or access the content. This issues has been fixed. The content starts below the menu so that it is accessible even when the menu is in expanded mode.

For this, JQuery script is written which introduces an event listener for menu button. When the menu button is clicked, this script changes the position of the "container" by 600 pixels, so that it moves below the menu. When menu button is clicked again, then the original position of the content is restored again.

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:44:33Z

Garadhy: /* Plan of Work */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:44:10Z

Garadhy: /* Testing */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

As shown in screenshot below, you can see the changes working on a smaller screen size.

[[File:Screenshot_with_changes.png‎]]

== Plan of Work ==

Following milestones have been identified to ensure the delivery of the project 1 week prior to the final deadline. 
* Reducing Height of Menu items and pushing submenu to right side of main Menu item. - 15th November, 2015 
* Pushing the content below the menu - 22nd November, 2015 
* Changing position of menu button to left side, and changing transition from left to right. - 29th November, 2015

File:Screenshot with changes.png

2015-12-05T04:40:48Z

Garadhy:

File:Gaurav.png

2015-12-05T04:39:29Z

Garadhy:

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:38:21Z

Garadhy: /* Testing */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

=== Test Results ===

== Plan of Work ==

Following milestones have been identified to ensure the delivery of the project 1 week prior to the final deadline. 
* Reducing Height of Menu items and pushing submenu to right side of main Menu item. - 15th November, 2015 
* Pushing the content below the menu - 22nd November, 2015 
* Changing position of menu button to left side, and changing transition from left to right. - 29th November, 2015

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:37:22Z

Garadhy: /* Plan of Work */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

== Testing ==

We are using inbuilt Mozilla browser functionality to check web page in different screen sizes.
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 

== Plan of Work ==

Following milestones have been identified to ensure the delivery of the project 1 week prior to the final deadline. 
* Reducing Height of Menu items and pushing submenu to right side of main Menu item. - 15th November, 2015 
* Pushing the content below the menu - 22nd November, 2015 
* Changing position of menu button to left side, and changing transition from left to right. - 29th November, 2015

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:37:09Z

Garadhy: /* Testing */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, the sub-menu has been shifted to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Spaced out Menu-items Problem ===

In toggle mode, when the screen width is below 1170px, on clicking the sub-menu button, the menu items on the drop down are too spaced out. As a result, the whole screen view is blocked and the interface looks too spread out. In order to resolve this issue, the space between the menu-items is reduced and the size of the drop down box is also reduced as a result.

* Declared a new class for aligning the logout button
<pre>
app/assets/stylesheets/navbar.scss
.logout-box{
margin-top: 7px;
left: -2px;
}
</pre>

* Applied the above declared class to the "logout-box"
<pre>
app/views/shared/_navigation.html.erb
<li class="right-most logout-box">
<%= link_to "Logout", {controller: "auth", action: "logout"}, method: :post %>
</li>
</pre>

* Reduced the padding space between menu-items
<pre>
li.first-level > a {
line-height: 10px;
padding: 0px 10px;
}
</pre>
=== Shifting menu icon to the left on re-sizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

== Plan of Work ==

Following milestones have been identified to ensure the delivery of the project 1 week prior to the final deadline. 
* Reducing Height of Menu items and pushing submenu to right side of main Menu item. - 15th November, 2015 
* Pushing the content below the menu - 22nd November, 2015 
* Changing position of menu button to left side, and changing transition from left to right. - 29th November, 2015

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:34:57Z

Garadhy: /* Testing */

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-12-05T04:32:17Z

Garadhy: /* Planned Changes */

== Purpose ==

This project aims to fix the problem of the Expertiza Menu layout for smaller devices such as mobiles and tablets. There are many problems currently existing for devices with smaller screen size such as, 

* The Menu layout takes almost whole screen space, which is not suitable from user experience point of view. 
* The submenu items cannot be selected smoothly. 
* User can neither see the content nor scroll it down properly when the menu is open, as it stays behind the menu. 

The above mentioned issues can be seen in the screenshot below. 

[[File:Screen_Shot_2015-11-08_at_10.33.15_PM.png‎]] 

== Planned Changes ==

The aforementioned issues will be addressed as explained below: 

* Reduce the height of the Menu items. As seen in the screenshot above, there is a lot of space between two menu items. Reducing the space in between will reduce the total screen space consumed by the Menu. 
* Show submenu items on the right side of respective menu item, so that they don't overlap with other menu items (Right now, they are shown below the main menu item). 
* Show the Menu selection button on the left side instead of right side. 
* Start the content below the Menu when Menu is in expanded mode. 

== Testing ==

We are using the browser extension "Responsive Web Design Tester". This extension allows to test a web page for variety of devices with different screen sizes, such as (but not limited to), iPad, iPadMini, iPhone, Nexus, HTC-One etc. 
With the help of this tool, we will be easily able to test that our changes are working fine for different screen sizes.
 
Responsive Web Design Tool - Settings 

[[File:Screen_Shot_2015-11-08_at_10.21.31_PM.png]] 

Responsive Web Design Tool - Devices list 

[[File: Screen_Shot_2015-11-08_at_10.22.05_PM.png]] 

== Implementation ==

The files listed below need to be changed to make proposed changes. 

* /config/vendor/assets/components/bootstrap/less/navbar.less 
The navbar-collapse less style needs to be modified here to enable seamless use and to handle overflows in case there is too much content for the user's view port on mobile devices.
* /app/assets/stylesheets/navbar.scss
The height difference between different menu options needs to be changed by modifying the number of pixels in the height attribute of the style in the following code
<pre>
ul.nav li.first-level {
font-size: 100%;
height: 66px;
}
</pre>
* /app/views/shared/_navigation.html.erb 
The toggle menu selection on resizing the window was earlier to the right and now to bring it to the left, we need to do a "pull-left" in the button for navbar-toggle.
* /app/assets/stylesheets/layout.scss
This file will contain the changes where we intend to make the position of the content relative to the header. This will ensure that even upon re-sizing the window the content will start below the header and would not be covered underneath the header.

=== Sub-Menu Overlapping Main-Menu Problem ===

On hovering over the menu items on the navigation bar shows the sub-menu. But, the sub-menu position on the screen hides the Main menu. In order to resolve the problem, we have shifted the sub-menu to the right from its actual position such that the main-menu is visible.

app/assets/stylesheets/navbar.scss
.dropdown-menu.pull-left{
top: 25%;
left: 15%;
}

=== Shifting menu icon to the left on resizing ===

Upon resizing the window beyond a width below 1170px, the menu changes as an icon bar which on clicking has a drop-down of options to select from with the corresponding sub-menu. This is a toggle button which is by default set on the right. While it does not make much of a difference while using it on a Desktop, it turns to be a problem in tablets and mobile devices wherein it would be more convenient and accessible to have the menu icon bar to the top left section of the header. The code below is a snippet to describe the change corresponding to it.

<button type="button" class="pull-left navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >

== Plan of Work ==

Following milestones have been identified to ensure the delivery of the project 1 week prior to the final deadline. 
* Reducing Height of Menu items and pushing submenu to right side of main Menu item. - 15th November, 2015 
* Pushing the content below the menu - 22nd November, 2015 
* Changing position of menu button to left side, and changing transition from left to right. - 29th November, 2015

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-11-10T14:34:37Z

Garadhy: /* Plan of Work */

File:Screen Shot 2015-11-09 at 9.01.31 PM.png

2015-11-10T02:03:34Z

Garadhy: uploaded a new version of "File:Screen Shot 2015-11-09 at 9.01.31 PM.png"

Edit assignment

File:Screen Shot 2015-11-09 at 9.01.31 PM.png

2015-11-10T02:02:39Z

Garadhy: Edit assignment

Edit assignment

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:21:13Z

Garadhy: /* Creating New Methods */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Change current directory to cloned repository 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

4. Check coverage: 
Open overage/index.html in browser and check line coverage for following methods
 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:21:03Z

Garadhy: /* Creating New Methods */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Change current directory to cloned repository 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

4. Check coverage: 
Open overage/index.html in browser and check line coverage for following methods
 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:20:52Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Change current directory to cloned repository 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

4. Check coverage: 
Open overage/index.html in browser and check line coverage for following methods
 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:20:38Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Change current directory to cloned repository 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

4. Check coverage: 
Open overage/index.html in browser and check line coverage for following methods
 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

 

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:20:22Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Change current directory to cloned repository 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

4. Check coverage: 
Open overage/index.html in browser and check line coverage for following methods
 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

 

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:19:35Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Change current directory to cloned repository 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

4. Check coverage: 
Open overage/index.html in browser.

 
Check line coverage for 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

 

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:19:22Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Change current directory to cloned repository 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

 
4. Check coverage: 
Open overage/index.html in browser.

 
Check line coverage for 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

 

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:18:56Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Go to cloned repo 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

 
4. Check coverage: 
Open overage/index.html in browser.

 
Check line coverage for 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

 

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:18:47Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
 
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Go to cloned repo 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

 
4. Check coverage: 
Open overage/index.html in browser.

 
Check line coverage for 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

 

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

2015-11-10T01:18:33Z

Garadhy: /* How to Run Tests */

= E1557. Refactoring SignUpSheetController.rb and SignUpSheet.rb =
In this project, we have unit tested various methods in SignUpSheetController.rb and SignUpSheet.rb as well as refactoring these methods. We first wrote unit tests to ensure we had adequate coverage for our methods. Then, we refactored our methods with confidence found from our unit tests.

== Unit Testing ==
For our unit testing, we used the RSpec framework. We choose this framework since legacy tests of our methods were implemented with RSpec. We also utilized the RSpec-Mocks to test functions related to the database without having to use fixtures.

We wrote multiple controller and model tests for corresponding functions so as to tests various scenarios and get 100 % test coverage.

E.g. If you run the test in spec/controllers/sign_up_sheet_spec.rb by command "rspec spec/controllers/sign_up_sheet_spec.rb", then you can see the 100% line coverage for controller method save_topic_deadlines() in sign_up_sheet_controller.rb. For checking the coverage, open the index.html page coverage folder and go to respective controller. 

Similar, run the tests in Model and Controllers folder to see 100% test coverage for following functions. 

1. Create()in SignUpSheetController 
2. self.add_signup_topic() in SignUpSheet Model 
3. save_topic_deadlines() in SignUpSheetController 
4. self.confirmTopic() in SignUpSheet 

== Refactoring ==
We performed various refactorings on our code to increase the codes readability and remove redundancy.

=== Extracting Variables ===
We extracted variable from complicated statements to increase the readability of the code. In the code base we were working with, there were a variety of lines of code that were more than 80 characters long. These lines of code were hard to read. So, we split them up into multiple lines of code by extracting statements found in function calls into their own variable.

Example:

<pre>duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: DeadlineType.find_by_name('submission').id, round: j).first</pre>

Became:

<pre>deadline_type_subm = DeadlineType.find_by_name('submission').id
duedate_subm = TopicDeadline.where(topic_id: topic.id, deadline_type_id: deadline_type_subm, round: j).first</pre>

=== Enforce Good Ruby Conventions ===
We attempted to enforce good Ruby conventions while refactoring the code. This entails doing things like correcting the formatting of the code to make it more readable. In addition to this, we converted a variety of iterators to follow good ruby conventions.

For example, sign_up_sheet.rb had the function self.add_sign_up_topic(assignment_id) which contained an iteration through a set of topics while manually maintaining an index variable. Manually maintaining the index variable can be problematic for future maintenance.
<pre>i=0
@topics.each { |topic|
# Code not relevant to example omitted.
i = i + 1
}
</pre>

We replaced these with the Ruby <code>each_with_index</code> iterator. This allows us to pass the responsibility of maintaining the count of the index to the iterator.
<pre>@topics.each_with_index do |topic, i|</pre>

We replaced "=>" while passing parameter by colon (:)
So that <pre>
'due_at' => due_dates[session[:duedates][j]['id'].to_s </pre>
became
<pre>
due_at: due_dates[session[:duedates][j]['id'].to_s
</pre>
 
=== Creating New Methods ===
We have refactored the methods which were doing a lot of things into two or more methods so as to segregate the functionality and following the basic principal that one method should do only one thing. Also, this helped in making the methods more readable and easy to understand. 

E.g. In sign_up_sheet.rb Model, "def sign_up_wailisted()" is the new method extracted from original method self.confirmTopic(). There are many more such examples which are done as part of refactoring.
 

== How to Run Tests ==
 
1. Clone the repo 
<pre>git clone https://github.com/MaxSchweizer/expertiza</pre>

2. Go to cloned repo 

3. Run Command: 
<pre>rspec spec/controllers/sign_up_sheet_spec.rb

rspec spec/models/sign_up_sheet_spec.rb
</pre>

 
4. Check coverage: 
Open overage/index.html in browser.

 
Check line coverage for 
a. Create()in sign_up_sheet_controller.rb in Controllers 
b. self.add_signup_topic() in sign_up_sheet.rb Models 
c. save_topic_deadlines() in sign_up_sheet_controller.rb in Controllers 
d. self.confirmTopic() in sign_up_sheet.rb in Models

 

== Fixing Issue 580 ==
We were not able to recreate the problem found in issue 580. After multiple attempts of trying to recreate the bug we began to examine the source code. We believe that someone else has already fixed the bug before we started working on the project.

CSC/ECE 517 Fall 2015/oss E1557 GXM

CSC/ECE 517 Fall 2015 E1583 Fix the CSS used for Menu Item

2015-11-09T04:13:44Z

Garadhy: /* Planned Changes */