reworked and fix minimized drawer (#137)

* added icons imgs for minimized drawer

* added 1 css class for imgs in minimized drawer

* rework minimized drawer a bit

* remove some console.log i forgot about

* modified sources of icons for when the drawer is minimized and so removed the function to get them

* added the icons path to the json representing the gather instance

i dont even know what im doing

* setup icons path

* linked icons from gather_pool.js to the front end ..?

i'm kinda lost here

app/javascripts/components/main.js

@@ -419,8 +419,12 @@ const GatherPage = React.createClass({
 		}
 
 		let appClass = ["skin-blue", "sidebar-mini", "fixed"];
-		if (this.state.showMessageBox) appClass.push("control-sidebar-open");
-		if (this.state.collapseMenu) appClass.push("sidebar-collapse");
+		if (this.state.showMessageBox){
+			appClass.push("control-sidebar-open");
+		} 
+		if (this.state.collapseMenu){
+			appClass.push("sidebar-collapse");
+		}
 
 		let connectionStatus;
 		const connectionState = this.state.connectionState;
@@ -475,6 +479,7 @@ const GatherPage = React.createClass({
 							</div>
 						</div>
 						<GatherMenu
+							drawerState={this.state.collapseMenu}
 							gatherPool={this.state.gatherPool}
 							currentGather={this.state.currentGather}
 							gatherSelectedCallback={this.onGatherSelected} />

app/stylesheets/app.css

@@ -230,6 +230,26 @@ html, body {
 	padding: 5px;
 }
 
+.drawerItems {
+	text-align:center;
+	font-size: 110%;
+	margin-bottom: -4px;
+}
+
+.drawerItemsIcon{
+	text-align:center;
+	font-size: 150%;
+	margin-top: 4px;
+	margin-bottom: 2px;
+}
+
+.aOpened{
+	padding-left:0px !important;
+	padding-right:0px !important;
+	padding-top:8px !important;
+	padding-bottom:0px !important;
+}
+
 /* Events */
 
 .events-panel {
@@ -247,6 +267,17 @@ html, body {
 	color: #fff;
 }
 
+.mapvotes{
+	border-top-width: 1px !important;
+	border-width: 1px 1px !important;
+	border-bottom-right-radius: 0px !important;
+	border-bottom-left-radius: 0px !important;
+}
+
+.unset1stborder{
+	border-top: unset;
+}
+
 .gather-voting {
 	color: #fff !important;	
 }
@@ -298,3 +329,10 @@ html, body {
 .borderless td, .borderless th {
   border: none !important;
 }
+
+/* minimized drawer gather icons */
+
+.gatherTypeIcons{
+	width: 35px;
+}
+

lib/gather/gather.js

@@ -41,6 +41,8 @@ function Gather (options) {
 
 	this.type = options.type || "classic";
 
+	this.icon = options.icon || "gather icon";
+
 	this.name = options.name || "Classic Gather";
 
 	this.description = options.description || "No player requirements";
@@ -358,6 +360,7 @@ Gather.prototype.electionStartTime = function () {
 Gather.prototype.toJson = function () {
 	return {
 		name: this.name,
+		icon: this.icon,
 		description: this.description,
 		type: this.type,
 		gatherers: this.gatherers,

lib/gather/gather_pool.js

@@ -19,6 +19,7 @@ const GatherPool = new Map();
 const GATHER_CONFIGS = [
 	{
 		type: "classic",
+		icon: '/normalGather.png',
 		name: "Classic Gather",
 		description: "No Requirements",
 		serverMembershipTest: function (server) {
@@ -27,6 +28,7 @@ const GATHER_CONFIGS = [
 	},
 	{
 		type: "progmod",
+		icon: '/progmodGather.png',
 		name: "Progressive Mod Gather",
 		description: "No Requirements",
 		serverMembershipTest: function (server) {
@@ -35,6 +37,7 @@ const GATHER_CONFIGS = [
 	},
 	{
 		type: "invitational",
+		icon: '/inviteGather.png',
 		name: "Invitational Gather",
 		description: "Join on ensl.org/teams/949",
 		// Grant invite if on list
@@ -56,6 +59,7 @@ const GATHER_CONFIGS = [
 GATHER_CONFIGS.forEach(config => {
 	const gatherManager = {
 		type: config.type,
+		icon: config.icon,
 		name: config.name,
 		registerCallback: function (type, method) {
 			if (this.gatherCallbacks[type]) {

spec/gather.js

@@ -282,6 +282,7 @@ describe("Gather Model:", function () {
 		it ("returns a json representation of the gather instance", function () {
 			var output = gather.toJson();
 			assert.isString(output.name);
+			assert.isString(output.icon);
 			assert.isString(output.description);
 			assert.isArray(output.gatherers);
 			assert.isString(output.state);