Style for previous page of discussion list

Juliana · Melissa Wen
1 parent de63c950
Showing 3 changed files with 163 additions and 1 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
@@ -1348,5 +1348,4 @@ float: left;
 .action-events-events .event-date{
   background:none;
   padding-left:0;
-
 }
@@ -654,3 +654,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
	@@ -1348,5 +1348,4 @@ float: left;		@@ -1348,5 +1348,4 @@ float: left;
1348	.action-events-events .event-date{	1348	.action-events-events .event-date{
1349	background:none;	1349	background:none;
1350	padding-left:0;	1350	padding-left:0;
1351	-
1352	}	1351	}
	@@ -654,3 +654,103 @@		@@ -654,3 +654,103 @@
654	}	654	}
655		655
656	/* end fo software internal pages */	656	/* end fo software internal pages */
		657	+
		658	+/Secundary page discussion/
		659	+
		660	+#content .model-discussion-page{
		661	+ text-align: left;
		662	+ font-color:#172738;
		663	+}
		664	+
		665	+#content .model-discussion-page .frequently-questions-top h2,
		666	+#content .model-discussion-page .frequently-questions-middle h2,
		667	+#content .model-discussion-page .frequently-questions-last h2{
		668	+ font-size: 22px;
		669	+}
		670	+
		671	+#content .main-block .model-discussion-page p strong{
		672	+ font-size: 14px;
		673	+}
		674	+
		675	+
		676	+.model-discussion-page .frequently-questions-top ul,
		677	+.model-discussion-page .frequently-questions-middle ul,
		678	+.model-discussion-page .frequently-questions-last ul{
		679	+ margin:0;
		680	+ padding-bottom: 20px;
		681	+ width: 100%;
		682	+}
		683	+
		684	+.model-discussion-page .frequently-questions-top li,
		685	+.model-discussion-page .frequently-questions-middle li,
		686	+.model-discussion-page .frequently-questions-last li {
		687	+ display: inline-table;
		688	+ padding:15px 10px 8px 10px;
		689	+ margin-right:2px;
		690	+ border:1px solid #ECEDF1;
		691	+ border-radius: 3px;
		692	+ background:#ECEDF1;
		693	+ width: 28%;
		694	+ text-align: left;
		695	+}
		696	+
		697	+.model-discussion-page .frequently-questions-top li a,
		698	+.model-discussion-page .frequently-questions-middle li a,
		699	+.model-discussion-page .frequently-questions-last li a {
		700	+ text-decoration: none;
		701	+ color:#000;
		702	+ font-size: 12px;
		703	+ font-weight: 700;
		704	+ line-height: 18px;
		705	+}
		706	+
		707	+.model-discussion-page .send-glyph a:before,
		708	+.model-discussion-page .list-glyph a:before,
		709	+.model-discussion-page .cancel-glyph a:before{
		710	+ font-family: FontAwesome;
		711	+ font-size: 14px;
		712	+ margin-right: 10px;
		713	+ font-weight: normal;
		714	+ float: left;
		715	+ margin:2px 10px 45px 0px;
		716	+}
		717	+
		718	+.model-discussion-page .send-glyph a:before{
		719	+ content: "\f1d8";
		720	+}
		721	+
		722	+.model-discussion-page .list-glyph a:before{
		723	+ content: "\f00b";
		724	+}
		725	+
		726	+.model-discussion-page .cancel-glyph a:before{
		727	+ content: "\f05e";
		728	+}
		729	+
		730	+.model-discussion-page .item-discussion-page-list{
		731	+ font-size: 15px;
		732	+ font-weight: 800;
		733	+ border-bottom: 1px solid #ccc;
		734	+ margin-bottom: 20px;
		735	+ padding-bottom: 5px;
		736	+}
		737	+
		738	+.model-discussion-page .frequently-questions-top #list-glyph,
		739	+.model-discussion-page .frequently-questions-middle #cancel-glyph,
		740	+.model-discussion-page .frequently-questions-last #send-glyph {
		741	+ background: #D3D6DE;
		742	+}
		743	+
		744	+.model-discussion-page .email-list,
		745	+.model-discussion-page .sub-question{
		746	+ display: block;
		747	+}
		748	+#content .model-discussion-page .email-list a,
		749	+#content .model-discussion-page .email-list a:hover{
		750	+ color:#3E67B1;
		751	+}
		752	+
		753	+.model-discussion-page .sub-question{
		754	+ font-weight: 800;
		755	+ padding-top: 30px;
		756	+}
	@@ -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