Style for previous page of discussion list - Closes #468

Signed-off-by: DylanGuedes <djmgguedes@gmail.com> Signed-off-by: Juliana Hilário <julianahdesousa@gmail.com>

Style for previous page of discussion list - Closes #468
Signed-off-by: DylanGuedes <djmgguedes@gmail.com> Signed-off-by: Juliana Hilário <julianahdesousa@gmail.com>
Juliana · Melissa Wen
1 parent fd161126
Showing 3 changed files with 164 additions and 3 deletions Show diff stats
src/noosfero-spb/noosfero-spb-theme/css/community-pages.css
src/noosfero-spb/noosfero-spb-theme/css/software-pages.css
src/noosfero-spb/noosfero-spb-theme/html-reference-resource/discussion-page.html
@@ -1314,7 +1314,6 @@ float: left;
 /* Events page - Solution temporary*/
-
 .action-events-events #content #agenda-title{
   font-size: 24px;
   border-bottom: 1px solid #ccc;
@@ -1349,5 +1348,4 @@ float: left;
 .action-events-events .event-date{
   background:none;
   padding-left:0;
-
-}
 \ No newline at end of file
+}
@@ -633,3 +633,103 @@
 }
 /*** end fo software internal pages ***/
+
+/*Secundary page discussion*/
+
+#content .model-discussion-page{
+  text-align: left;
+  font-color:#172738;
+}
+
+#content .model-discussion-page .frequently-questions-top h2,
+#content .model-discussion-page .frequently-questions-middle h2,
+#content .model-discussion-page .frequently-questions-last h2{
+  font-size: 22px;
+}
+
+#content .main-block .model-discussion-page p strong{
+  font-size: 14px;
+}
+
+
+.model-discussion-page .frequently-questions-top ul,
+.model-discussion-page .frequently-questions-middle ul,
+.model-discussion-page .frequently-questions-last ul{
+  margin:0;
+  padding-bottom: 20px;
+  width: 100%;
+}
+
+.model-discussion-page .frequently-questions-top li,
+.model-discussion-page .frequently-questions-middle li,
+.model-discussion-page .frequently-questions-last li {
+  display: inline-table; 
+  padding:15px 10px 8px 10px;
+  margin-right:2px;
+  border:1px solid #ECEDF1;
+  border-radius: 3px;
+  background:#ECEDF1;
+  width: 28%;
+  text-align: left;
+}
+
+.model-discussion-page .frequently-questions-top li a,
+.model-discussion-page .frequently-questions-middle li a,
+.model-discussion-page .frequently-questions-last li a {
+  text-decoration: none;
+  color:#000;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.model-discussion-page .send-glyph a:before,
+.model-discussion-page .list-glyph a:before,
+.model-discussion-page .cancel-glyph a:before{
+  font-family: FontAwesome;
+  font-size: 14px;
+  margin-right: 10px;
+  font-weight: normal;
+  float: left;
+  margin:2px 10px 45px 0px;
+}
+
+.model-discussion-page .send-glyph a:before{
+  content: "\f1d8";
+}
+
+.model-discussion-page .list-glyph a:before{
+  content: "\f00b";
+}
+
+.model-discussion-page .cancel-glyph a:before{
+  content: "\f05e";
+}
+
+.model-discussion-page .item-discussion-page-list{
+  font-size: 15px;
+  font-weight: 800;
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+}
+
+.model-discussion-page .frequently-questions-top #list-glyph,
+.model-discussion-page .frequently-questions-middle #cancel-glyph,
+.model-discussion-page .frequently-questions-last #send-glyph {
+  background: #D3D6DE;
+}
+
+.model-discussion-page .email-list,
+.model-discussion-page .sub-question{
+  display: block;
+}
+#content .model-discussion-page .email-list a,
+#content .model-discussion-page .email-list a:hover{
+  color:#3E67B1;
+}
+
+.model-discussion-page .sub-question{
+  font-weight: 800;
+  padding-top: 30px;
+}
@@ -0,0 +1,63 @@
+<div class="model-discussion-page">
+    <p>Na nova versão do SPB foram criadas listas de discussão, e é por meio delas que a comunidade deverá comunicar-se</p>
+
+    <div class="frequently-questions-top">
+        <h2>Dúvidas Frequentes</h2>
+        <ul>
+            <li class="list-glyph"><a href="#how-to-subscribe">Como se inscrever nas listas?</a></li>
+            <li class="cancel-glyph"><a href="#cancel-inscription">Como cancelar minha assinatura nas listas?</a></li>
+            <li class="send-glyph"><a href="#mensage-list">Como enviar mensagens para as listas?</a></li>
+        </ul>
+    </div>
+
+    <div class="how-to-subscribe">
+        <div class="item-discussion-page-list"><a name="how-to-subscribe">Como se inscrever nas listas?</a></div>
+        <p>Primeiramente acesse o <a href="https://softwarepublico.gov.br/account/login">Portal SPB</a> e faça o login com seu usuário e senha</p>
+        <p>Não é cadastrado? Acesse <a href="https://softwarepublico.gov.br/account/register">Como faço para me cadastrar ao Portal do Software Público Brasileiro?</a></p>
+        <p>Após estar logado em sua conta, acesse seu perfil clicando no menu superior direito em "Meu perfil" como na imagem abaixo:</p>
+        <p><img src="http://localhost:3000/articles/0000/2273/img-01.png" alt="" /> </p>
+        <p>Clique em <strong>Inscreva-se nas listas de discussão</strong>, abaixo da sua foto de perfil</p>
+        <p>Marque as listas que queira participar e clique em <strong>Atualizar Inscrições</strong></p>
+        <p><img src="http://localhost:3000/articles/0000/2282/passo-01.png" alt="" /></p>
+        <p><img src="http://localhost:3000/articles/0000/2281/passo-02__1_.png" alt="" /></p>
+        <p><img src="http://localhost:3000/articles/0000/2276/img-04.png" alt="" /></p>
+        <p>Deseja acessar a lista de discussao? <a href="http://localhost:3000/search/?order=latest&amp;list=software&amp;type=thread">clique aqui</a></p>
+    </div>
+
+    <div class="frequently-questions-middle">
+        <h2>Dúvidas Frequentes</h2>
+        <ul>
+            <li class="list-glyph"><a href="#how-to-subscribe">Como se inscrever nas listas?</a></li>
+            <li class="cancel-glyph"><a href="#cancel-inscription">Como cancelar minha assinatura nas listas?</a></li>
+            <li class="send-glyph"><a href="#mensage-list">Como enviar mensagens para as listas?</a></li>
+        </ul>
+    </div>
+
+    <div class="cancel-inscription">
+        <div class="item-discussion-page-list"><a name="cancel-inscription">Como cancelar minha assinatura nas listas?</a></div>
+        <p>Clique em  <strong>Inscreva-se nas listas de discussão</strong>, abaixo da sua foto de perfil</p>
+        <p>Desmarque as listas que queira deixar de participar e clique em <strong>Atualizar Inscrições</strong></p>
+        <p><img src="http://localhost:3000/articles/0000/2283/img-cancelar-assinatura.png" alt="" /></p>
+    </div>
+
+    <div class="frequently-questions-last">
+        <h2>Dúvidas Frequentes</h2>
+        <ul>
+            <li class="list-glyph"><a href="#how-to-subscribe">Como se inscrever nas listas?</a></li>
+            <li class="cancel-glyph"><a href="#cancel-inscription">Como cancelar minha assinatura nas listas?</a></li>
+            <li class="send-glyph"><a href="#mensage-list">Como enviar mensagens para as listas?</a></li>
+        </ul>
+    </div>
+
+    <div class="mensage-list">
+        <div class="item-discussion-page-list"><a name="mensage-list">Como enviar mensagens para as listas?</a></div>
+        <p>Para enviar uma nova mensagem para as listas, basta enviar um e-mail para:</p>
+        <span class="email-list"><a>nome@listas.softwarepublico.gov.br</a></span> <span class="email-list"><a>nome@listas.softwarepublico.gov.br</a></span>
+    </div>
+
+    <div class="mensage-list">
+        <span class="sub-question">Responder uma mensagem existente:</span>
+        <p>Basta responder o e-mail que foi recebido ou acesse o <strong>Portal SPB</strong> e faça o login com seu usuário e senha.</p>
+        <p>Não é cadastrado? Acesse Como faço para me cadastrar ao Portal do Software Público Brasileiro? Após estar logado em sua conta, acesse a página do software, clique em "Lista de discussão", acesse o tópico desejado e responda-o.</p>
+    </div>
+</div>
 \ No newline at end of file
	@@ -633,3 +633,103 @@		@@ -633,3 +633,103 @@
633	}	633	}
634		634
635	/* end fo software internal pages */	635	/* end fo software internal pages */
		636	+
		637	+/Secundary page discussion/
		638	+
		639	+#content .model-discussion-page{
		640	+ text-align: left;
		641	+ font-color:#172738;
		642	+}
		643	+
		644	+#content .model-discussion-page .frequently-questions-top h2,
		645	+#content .model-discussion-page .frequently-questions-middle h2,
		646	+#content .model-discussion-page .frequently-questions-last h2{
		647	+ font-size: 22px;
		648	+}
		649	+
		650	+#content .main-block .model-discussion-page p strong{
		651	+ font-size: 14px;
		652	+}
		653	+
		654	+
		655	+.model-discussion-page .frequently-questions-top ul,
		656	+.model-discussion-page .frequently-questions-middle ul,
		657	+.model-discussion-page .frequently-questions-last ul{
		658	+ margin:0;
		659	+ padding-bottom: 20px;
		660	+ width: 100%;
		661	+}
		662	+
		663	+.model-discussion-page .frequently-questions-top li,
		664	+.model-discussion-page .frequently-questions-middle li,
		665	+.model-discussion-page .frequently-questions-last li {
		666	+ display: inline-table;
		667	+ padding:15px 10px 8px 10px;
		668	+ margin-right:2px;
		669	+ border:1px solid #ECEDF1;
		670	+ border-radius: 3px;
		671	+ background:#ECEDF1;
		672	+ width: 28%;
		673	+ text-align: left;
		674	+}
		675	+
		676	+.model-discussion-page .frequently-questions-top li a,
		677	+.model-discussion-page .frequently-questions-middle li a,
		678	+.model-discussion-page .frequently-questions-last li a {
		679	+ text-decoration: none;
		680	+ color:#000;
		681	+ font-size: 12px;
		682	+ font-weight: 700;
		683	+ line-height: 18px;
		684	+}
		685	+
		686	+.model-discussion-page .send-glyph a:before,
		687	+.model-discussion-page .list-glyph a:before,
		688	+.model-discussion-page .cancel-glyph a:before{
		689	+ font-family: FontAwesome;
		690	+ font-size: 14px;
		691	+ margin-right: 10px;
		692	+ font-weight: normal;
		693	+ float: left;
		694	+ margin:2px 10px 45px 0px;
		695	+}
		696	+
		697	+.model-discussion-page .send-glyph a:before{
		698	+ content: "\f1d8";
		699	+}
		700	+
		701	+.model-discussion-page .list-glyph a:before{
		702	+ content: "\f00b";
		703	+}
		704	+
		705	+.model-discussion-page .cancel-glyph a:before{
		706	+ content: "\f05e";
		707	+}
		708	+
		709	+.model-discussion-page .item-discussion-page-list{
		710	+ font-size: 15px;
		711	+ font-weight: 800;
		712	+ border-bottom: 1px solid #ccc;
		713	+ margin-bottom: 20px;
		714	+ padding-bottom: 5px;
		715	+}
		716	+
		717	+.model-discussion-page .frequently-questions-top #list-glyph,
		718	+.model-discussion-page .frequently-questions-middle #cancel-glyph,
		719	+.model-discussion-page .frequently-questions-last #send-glyph {
		720	+ background: #D3D6DE;
		721	+}
		722	+
		723	+.model-discussion-page .email-list,
		724	+.model-discussion-page .sub-question{
		725	+ display: block;
		726	+}
		727	+#content .model-discussion-page .email-list a,
		728	+#content .model-discussion-page .email-list a:hover{
		729	+ color:#3E67B1;
		730	+}
		731	+
		732	+.model-discussion-page .sub-question{
		733	+ font-weight: 800;
		734	+ padding-top: 30px;
		735	+}
	@@ -0,0 +1,63 @@		@@ -0,0 +1,63 @@
		1	+<div class="model-discussion-page">
		2	+ <p>Na nova versão do SPB foram criadas listas de discussão, e é por meio delas que a comunidade deverá comunicar-se</p>
		3	+
		4	+ <div class="frequently-questions-top">
		5	+ <h2>Dúvidas Frequentes</h2>
		6	+ <ul>
		7	+ <li class="list-glyph"><a href="#how-to-subscribe">Como se inscrever nas listas?</a></li>
		8	+ <li class="cancel-glyph"><a href="#cancel-inscription">Como cancelar minha assinatura nas listas?</a></li>
		9	+ <li class="send-glyph"><a href="#mensage-list">Como enviar mensagens para as listas?</a></li>
		10	+ </ul>
		11	+ </div>
		12	+
		13	+ <div class="how-to-subscribe">
		14	+ <div class="item-discussion-page-list"><a name="how-to-subscribe">Como se inscrever nas listas?</a></div>
		15	+ <p>Primeiramente acesse o <a href="https://softwarepublico.gov.br/account/login">Portal SPB</a> e faça o login com seu usuário e senha</p>
		16	+ <p>Não é cadastrado? Acesse <a href="https://softwarepublico.gov.br/account/register">Como faço para me cadastrar ao Portal do Software Público Brasileiro?</a></p>
		17	+ <p>Após estar logado em sua conta, acesse seu perfil clicando no menu superior direito em "Meu perfil" como na imagem abaixo:</p>
		18	+ <p><img src="http://localhost:3000/articles/0000/2273/img-01.png" alt="" /> </p>
		19	+ <p>Clique em <strong>Inscreva-se nas listas de discussão</strong>, abaixo da sua foto de perfil</p>
		20	+ <p>Marque as listas que queira participar e clique em <strong>Atualizar Inscrições</strong></p>
		21	+ <p><img src="http://localhost:3000/articles/0000/2282/passo-01.png" alt="" /></p>
		22	+ <p><img src="http://localhost:3000/articles/0000/2281/passo-02__1_.png" alt="" /></p>
		23	+ <p><img src="http://localhost:3000/articles/0000/2276/img-04.png" alt="" /></p>
		24	+ <p>Deseja acessar a lista de discussao? <a href="http://localhost:3000/search/?order=latest&list=software&type=thread">clique aqui</a></p>
		25	+ </div>
		26	+
		27	+ <div class="frequently-questions-middle">
		28	+ <h2>Dúvidas Frequentes</h2>
		29	+ <ul>
		30	+ <li class="list-glyph"><a href="#how-to-subscribe">Como se inscrever nas listas?</a></li>
		31	+ <li class="cancel-glyph"><a href="#cancel-inscription">Como cancelar minha assinatura nas listas?</a></li>
		32	+ <li class="send-glyph"><a href="#mensage-list">Como enviar mensagens para as listas?</a></li>
		33	+ </ul>
		34	+ </div>
		35	+
		36	+ <div class="cancel-inscription">
		37	+ <div class="item-discussion-page-list"><a name="cancel-inscription">Como cancelar minha assinatura nas listas?</a></div>
		38	+ <p>Clique em <strong>Inscreva-se nas listas de discussão</strong>, abaixo da sua foto de perfil</p>
		39	+ <p>Desmarque as listas que queira deixar de participar e clique em <strong>Atualizar Inscrições</strong></p>
		40	+ <p><img src="http://localhost:3000/articles/0000/2283/img-cancelar-assinatura.png" alt="" /></p>
		41	+ </div>
		42	+
		43	+ <div class="frequently-questions-last">
		44	+ <h2>Dúvidas Frequentes</h2>
		45	+ <ul>
		46	+ <li class="list-glyph"><a href="#how-to-subscribe">Como se inscrever nas listas?</a></li>
		47	+ <li class="cancel-glyph"><a href="#cancel-inscription">Como cancelar minha assinatura nas listas?</a></li>
		48	+ <li class="send-glyph"><a href="#mensage-list">Como enviar mensagens para as listas?</a></li>
		49	+ </ul>
		50	+ </div>
		51	+
		52	+ <div class="mensage-list">
		53	+ <div class="item-discussion-page-list"><a name="mensage-list">Como enviar mensagens para as listas?</a></div>
		54	+ <p>Para enviar uma nova mensagem para as listas, basta enviar um e-mail para:</p>
		55	+ <span class="email-list"><a>nome@listas.softwarepublico.gov.br</a></span> <span class="email-list"><a>nome@listas.softwarepublico.gov.br</a></span>
		56	+ </div>
		57	+
		58	+ <div class="mensage-list">
		59	+ <span class="sub-question">Responder uma mensagem existente:</span>
		60	+ <p>Basta responder o e-mail que foi recebido ou acesse o <strong>Portal SPB</strong> e faça o login com seu usuário e senha.</p>
		61	+ <p>Não é cadastrado? Acesse Como faço para me cadastrar ao Portal do Software Público Brasileiro? Após estar logado em sua conta, acesse a página do software, clique em "Lista de discussão", acesse o tópico desejado e responda-o.</p>
		62	+ </div>
		63	+</div>
0	\ No newline at end of file	64	\ No newline at end of file