infos.html 7.63 KB
Newer Older
Jamesie Pic's avatar
Jamesie Pic committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
		
    <!-- Custom CSS -->
    <link href="./css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
			
		<div class="jumbotron">
			<div class="container">
				<h1>Memopol infos and sytle guide</h1>
				<p>Everything there is to know about the Memopol front end design.</p>
			</div>
		</div>

		<div class="container-fluid">
			
			<div class="page-header">
				<h2>Site map</h2>
			</div>
			
			<p>All positions (votes & public positions) belong to two categories: the MEP or group that stand on the position and the Dossier they belong to, depending on the topic. </p>
			<p>LQDN's analysis, recommendations or summary can appear at any moment on the site to clarify something or for comparison.</p>
			<p>The 2 main categories are as follows:</p>
			<dl>

				<dt>Members of the European Parliement (MEP)</dt>
				<dd>They can be considered either as individuals or as groups (party / country / committee).</dd>
				<dd>They have the foolowing attributes:
					<dl class="dl-horizontal">
						<dt>ID card</dt>
						<dd>A list of identifiers (name, groups, social links, &pi;Phone)</dd>
						<dd>+ scores & badges</dd>

						<dt>Mandates</dt>
						<dd>Everything an individual MEP is involved in. (commissions, committees, ...)</dd>
						<dd>Emphasis is placed on the mandates relevant for LQDN's activities.</dd>

						<dt>Votes</dt>
						<dd>Every vote of the MEP or group, compared to other groups votes, final results and LQDN's recommandations.</dd>
						<dd>+ details regarding evolution and scores.</dd>

						<dt>Public positions</dt>
						<dd>All public positions of the MEP or group, in the Parliement or through other medias.</dd>
						<dd>+ can include summary, context or short analysis by LQDN.</dd>
					</dl>
				</dd>

				<dt>Dossiers</dt>
				<dd>They are thematic gathering of infos regarding a specific topic.</dd>
				<dd>They regroup the following elements:</dd>
					<dl class="dl-horizontal">
						<dt>LQDN's opinion</dt>
						<dd>A summary / introduction to the topic</dd>
						<dd>+ a link to all LQDN's positions on the matter (press releases / press review)</dd>
						<dd>+ (in case of current activity) a list of future milestones and possibilities for volunteers to help.</dd>

						<dt>Votes</dt>
						<dd>Every vote per group or MEP, final results and LQDN's recommandations.</dd>
						<dd>+ details regarding evolution.</dd>

						<dt>Public positions</dt>
						<dd>All public positions on the topic, in the Parliement or through other medias.</dd>
						<dd>+ can include summary, context or short analysis by LQDN.</dd>
			</dl>

			<div class="page-header">
				<h2>Nav section</h2>
			</div>
			
			<h3>What's in it</h3>
			<dl>
				<dt>Access to categories: search bar</dt>
				<dd>The nav has to provide for an easy access to both MEP pages and dossiers. To do so, we are using a search bar (useful for broad searches), that can be unfolded ("more search options") to use more precise key words.</dd>
				<dt>Access to categories: see all MEPS or dossiers</dt>
				<dd>Easy access to all MEP pages and dossiers. When you're not looking for something specific.</dd>
				
				<dt>Adding a position</dt>
				<dd>Users have to be able to quickly add a public position when they hear one (for example on the radio). Thus a button allows for a modal to appear for a quick addition.</dd>
			</dl>	
				
			<h3>Size and position</h3>
				<p class="lead">On the left</p>
				<p>A left sided nav section allows for a consistency between desktop UX and mobile UX. With the incresed use of mobile phone, people are getting used to this kind of interaction. Moreover, it allows for more space on the screen as the section is foldable, and it is always accessible, and not stuck at the top of the page.</p>
			
			<div class="row">

				<div class="col-sm-4">
					<p class="lead text-center">Large view</p>
					<p>For extra large views, the nav is always visible.</p>
				</div>
				
				<!--div class="col-sm-4">
					<p class="lead text-center">Medium view</p>
					<p>For medium views (computers / tablets) the nav is entirely visible on the first page, and is accessible either by an icon or a left-edge overflowing that unfolds to the right when clicked.</p>
				</div-->
				
				<div class="col-sm-4">
					<p class="lead text-center">Small view</p>
					<p>The nav is accessible either by an icon or a left-edge overflowing that unfolds to the right when clicked or touched.</p>
				</div>
				
				</div>
				
				
			<div class="page-header">
				<h2>CSS bases</h2>
			</div>
				
			<h3>Colors</h3>
			
				<div class="row">
					<div class="col-sm-4 col-md-3">
						<div class="thumbnail">
							<div style="background-color: #ffffff; width: 100%; height: 100px; border-bottom:solid 1px #dddddd;"></div>
							<div class="caption">
								<h4 class="text-center">Main color: white</h4>
								<p>For backgrounds & default options</p>
							</div>
						</div>
					</div>
					
					<div class="col-sm-4 col-md-3">
						<div class="thumbnail">
							<div style="background-color: #487ED6; width: 100%; height: 100px; border-bottom:solid 1px #dddddd;"></div>
							<div class="caption">
								<h4 class="text-center">Primary color: LQDN's blue</h4>
								<p>Color consistency with LQDN's main site</p>
							</div>
						</div>
					</div>
					
					<div class="col-sm-4 col-md-3">
						<div class="thumbnail">
							<div style="background-color: #212121; width: 100%; height: 100px; border-bottom:solid 1px #dddddd;"></div>
							<div class="caption">
								<h4 class="text-center">Heading color: Dark grey</h4>
								<p>Good readability.</p>
							</div>
						</div>
					</div>
					
					<div class="col-sm-4 col-md-3">
						<div class="thumbnail">
							<div style="background-color: #222; width: 100%; height: 100px; border-bottom:solid 1px #dddddd;"></div>
							<div class="caption">
								<h4 class="text-center">Text color: Lighter grey</h4>
								<p>Good readability, not too much contrast.</p>
							</div>
						</div>
					</div>
				</div>
				
				<p class="alert alert-info">Attention les alertes comme celles-ci devraient être bleu-quadrature. </p>
			
			<h3>Typo</h3>
				<dl class="dl-horizontal">
					<dt style="font-family:propaganda;">Propaganda</dt>
					<dd>Title font</dd>
					<dt style="font-family: 'Helvetica Neue', Helvetica, Arial">Helvetica Neue</dt>
					<dd>Text font</dd>
				</dl>
										 
				
					
				
			<div class="page-header">
				<h2>TO DO</h2>
			</div>
				
			<p class="lead">Make it responsive on small screen</p>
				
			<p class="lead">Make it printable</p>
										 
			</div>
		</div>
		
		
		
		
		
		
		
		
		
		
		

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>