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	1348	.action-events-events .event-date{
1349	1349	background:none;
1350	1350	padding-left:0;
1351		-
1352	1351	}
...	...
...	...	@@ -654,3 +654,103 @@
654	654	}
655	655
656	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 @@
	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	64	\ No newline at end of file
...	...