Commit 1fe8dffb authored by Bruno Meyer's avatar Bruno Meyer 😢
Browse files

Bugs da versão mobile corrigidos

parent 20e2a25e
......@@ -2,6 +2,10 @@
box-sizing: border-box;
}
td{
}
body{
font-family: 'Neuton', serif;
......@@ -149,6 +153,15 @@ a{
padding: 0.5em;
}
.info-mobile{
display:none;
width: 95%;
border-radius: 0.5em;
background: #eee;
}
#title{
text-align: center;
......@@ -223,6 +236,9 @@ dt {
/* cronograma */
#cronograma-mobile{
display:none;
}
table#cronograma{
text-align: center;
......@@ -353,6 +369,30 @@ table#cronograma .othercolumns{
transition-timing-function: ease-out;
transition: height 100%;
}
.info-mobile{
display:inline;
}
.info{
display:none;
}
#cronograma{
display:none;
}
#cronograma-mobile{
display:inline;
}
#footer{
width: 100%;
background-color: #fff;
border-top: 4px solid #c6c6c6;
height: 10em;
color: black;
margin: 0;
padding: 0;
padding-left: 0;
}
}
......
//Altere este arquivo para modificar as informações referentes ao cronograma da semana
//Obs: Estes dados serão utilizados para gerar resultados para versão desktop e mobile
var blocos = [
"13:30",
"14:00",
"14:30",
"15:00",
"15:30",
"16:00",
"16:30",
"17:00"
]
//É possivel inserir código html dentro das strings
var horarios = {
"<b>Segunda 20/02</b>": {
"13:30": "Apresentação das Coordenações",
"14:00": "Apresentação do Departamento",
"14:30": "Introdução à Semana",
"15:00": "Intervalo",
"15:30": "História da Computação*",
"16:00": "Papo sobre a vida acâdemica",
"16:30": "Visita ao Campus",
"17:00": "Visita ao Campus"
},
"<b>Terça 21/02</b>": {
"13:30": "Curso de Linux",
"14:00": "Curso de Linux",
"14:30": "Curso de Linux",
"15:00": "Intervalo",
"15:30": "Mercado de trabalho*",
"16:00": "Conhecendo o seu centro acadêmico (<a href='http://cei.inf.ufpr.br/'>CEI</a>/<a href='http://ceib.inf.ufpr.br/'>CEIB</a>)",
"16:30": "Dinâmica com os calouros",
"17:00": "Empresa de jogos"
},
"<b>Quarta 22/02</b>": {
"13:30": "Conhecendo o Programa de Educação Tutorial (<a href='http://pet.inf.ufpr.br/'>PET</a>)",
"14:00": "<a href='http://www.inf.ufpr.br/maratona/'>Maratona de Programação</a>",
"14:30": "Conhecendo a Empresa Júnior de Informática (<a href='http://ecomp.co/'>ECOMP</a>)*",
"15:00": "Intervalo",
"15:30": "Curso de Linux",
"16:00": "Curso de Linux",
"16:30": "Curso de Linux",
"17:00": "Debate: Mulheres na Computação"
},
"<b>Quinta 23/02</b>": {
"13:30": "Curso de Linux",
"14:00": "Curso de Linux",
"14:30": "Curso de Linux",
"15:00": "Intervalo",
"15:30": "Atividade de Integração (Traga uma câmera fotográfica, celular ou tekpix)",
"16:00": "Atividade de Integração (Traga uma câmera fotográfica, celular ou tekpix)",
"16:30": "Atividade de Integração (Traga uma câmera fotográfica, celular ou tekpix)",
"17:00": "Atividade de Integração (Traga uma câmera fotográfica, celular ou tekpix)"
},
"<b>Sexta 24/02</b>": {
"13:30": "Curso de Linux",
"14:00": "Curso de Linux",
"14:30": "Curso de Linux",
"15:00": "Intervalo",
"15:30": "Aula Algoritmos I",
"16:00": "Aula Algoritmos I",
"16:30": "Aula Algoritmos I",
"17:00": "Aula Algoritmos I"
}
}
<!DOCTYPE html>
<head>
<title>Semana de Recepção dos Calouros</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
......@@ -24,6 +25,8 @@
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
......@@ -110,7 +113,7 @@
<div class="content" id="oque">
<h1>O que é a Semana de Recepção dos Calouros?</h1>
<div class="info" style="width: 95%; border: 1px solid black; border-radius: 0.5em; background: #eee">
<div class="info">
<table style="width: 100%;">
<tr>
<td>
......@@ -142,7 +145,14 @@
</ul>
</td>
</table>
</div>
</div>
<div class="info-mobile">
Uma semana de <b>cursos</b>, <b>palestras</b> e <b>atividades</b> para que vocês tirem dúvidas sobre a vida acadêmica, se familiarizem com as instalações, recursos e ferramentas e conheçam oportunidades oferecidas pela universidade e pelo curso escolhido.
</div>
<p>Se ambientar ao meio acadêmico não é uma tarefa simples. Por isso, alguns cursos da UFPR oferecem aos seus novos alunos uma
<strong>Semana de Recepção dos Calouros</strong> assim que eles entram. Durante essa semana, são realizadas
......@@ -203,79 +213,26 @@
</div>
<br>
<div class="wrap-center">
Este é um cronograma preliminar, sujeito a mudanças em algumas atividades.
Este é um cronograma preliminar, sujeito a mudanças em algumas atividades.<br><br>
<table id="cronograma" class="pure-table pure-table-bordered">
<thead>
<tr>
<th class="firstcolumn"></th>
<th class="othercolumns">Segunda 20/02</th>
<th class="othercolumns">Terça 21/02</th>
<th class="othercolumns">Quarta 22/02</th>
<th class="othercolumns">Quinta 23/02</th>
<th class="othercolumns">Sexta 24/02</th>
<th class="othercolumns"><center>Segunda 20/02</center></th>
<th class="othercolumns"><center>Terça 21/02</center></th>
<th class="othercolumns"><center>Quarta 22/02</center></th>
<th class="othercolumns"><center>Quinta 23/02</center></th>
<th class="othercolumns"><center>Sexta 24/02</center></th>
</tr>
</thead>
<tbody>
<tr>
<th>13:30</th>
<td >Apresentação das Coordenações</td>
<td rowspan="3">Curso de Linux</td>
<td>Conhecendo o Programa de Educação Tutorial (<a href="http://pet.inf.ufpr.br/">PET</a>)</td>
<td rowspan="3">Curso de Linux</td>
<td rowspan="3">Curso de Linux</td>
</tr>
<tr>
<th>14:00</th>
<td >Apresentação do Departamento</td>
<td><a href="http://www.inf.ufpr.br/maratona/">Maratona de Programação</a></td>
</tr>
<tr>
<th>14:30</th>
<td>Introdução à Semana</td>
<td>Conhecendo a Empresa Júnior de Informática (<a href="http://ecomp.co/">ECOMP</a>)*</td>
</tr>
<tr>
<th>15:00</th>
<td>Intervalo</td>
<td>Intervalo</td>
<td>Intervalo</td>
<td>Intervalo</td>
<td>Intervalo</td></tr>
<tr>
<th>15:30</th>
<td>História da Computação*</td>
<td>Mercado de trabalho*</td>
<td rowspan="3">Curso de Linux</td>
<td rowspan="4">Atividade de Integração (Traga uma câmera fotográfica, celular ou tekpix)</td>
<td rowspan="4">Aula Algoritmos I</td>
</tr>
<tr>
<th>16:00</th>
<td>Papo sobre a vida acâdemica</td>
<td>Conhecendo o seu centro acadêmico (<a href="http://cei.inf.ufpr.br/">CEI</a>/<a href="http://ceib.inf.ufpr.br/">CEIB</a>)</td>
</tr>
<tr>
<th>16:30</th>
<td rowspan="2"> Visita ao Campus </td>
<td>Dinâmica com os calouros</td>
</tr>
<tr>
<th>17:00</th>
<td>Empresa de jogos</td>
<td>Debate: Mulheres na Computação</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<div id="cronograma-mobile"></div>
</div>
<h4><br><br>Atividades com * ainda não foram confirmadas</h4>
......@@ -342,74 +299,14 @@
<div class="content" id="mapa">
<h1>Mapa do Centro Politécnico</h1>
<div class="wrap-center">
<?php /* <iframe src="https://mapsengine.google.com/map/embed?mid=zV88yKqPO0QE.kekRtnOuWe40" style="max-width:800px; width: 80%; height:600px"></iframe>
*/ ?>
<iframe width='100%' height='500px' frameBorder='0' src='http://u.osmfr.org/m/126257/'></iframe>
</div>
Clique nos marcadores para detalhes
<div class="pure-g">
<div class="pure-u-1-3">
<h2>Principais blocos</h2>
<ul>
<li>
<span class="marker marker-blue"></span>
<b>Departamento de Informática</b>
</li>
<li>
<span class="marker marker-blue"></span>
<b>Biblioteca de Ciência e Tecnologia</b>
</li>
<li>
<span class="marker marker-blue"></span>
<b>Prédio da Administração</b>
</li>
<li>
<span class="marker marker-blue"></span>
<b>Bloco PA</b>
<li>
<li>
<span class="marker marker-blue"></span>
<b>Bloco PC</b>
</li>
<li>
<span class="marker marker-blue"></span>
<b>Bloco CT</b>
</li>
<span class="marker marker-blue"></span>
<b>Bloco EQ</b>
</li>
</li>
</ul>
</div>
<div class="pure-u-1-3">
<h2>Entradas</h2>
<ul>
<li>
<span class="marker marker-purple"></span>
<b>Saída do bar</b>
</li>
<li>
<span class="marker marker-purple"></span>
<b>Saída do inter 2</b> - fechada para carros
</li>
<li>
<span class="marker marker-purple"></span>
<b>Saída para avenida</b>
</li>
</ul>
</div>
<div class="pure-u-1-3">
<h2>Alimentação</h2>
<ul>
<li><span class="marker marker-gold"></span> <b>Restaurante Universitário (RU)</b></li>
<li><span class="marker marker-gold"></span> <b>Cantina Externa</b></li>
<li><span class="marker marker-gold"></span> <b>Cantina Interna</b></li>
</ul>
</div>
</div>
</div>
<div class="content" id="linhas">
......@@ -490,9 +387,9 @@
<div class="pure-u-1-5">
<b>Organização</b>
<div class="pure-g">
<a href="http://pet.inf.ufpr.br">
<center><a href="http://pet.inf.ufpr.br">
<img id="logo-pet" src="assets/logo_PET.png" alt="PET Computação UFPR" >
</a>
</a></center>
</div>
</div>
<!--
......@@ -516,6 +413,7 @@ ______________________________________PATROCINIO AQUI__________________________
</div>
</div>
<script src="horarios.js"></script>
<script>
......@@ -528,6 +426,73 @@ ______________________________________PATROCINIO AQUI__________________________
e.style.display="none";
}
/*--------------------------------------------------------------------------------------------------*/
//Preenche a versao do cronograma para Desktop
var cron = document.getElementById("cronograma");
//Vetor que armazena os indices atuais de cada dia (sao preenchidos "paralelamente" pois o html exige a construção de linha por linha
var vet_i = {}
for(dia in horarios)
vet_i[dia] = 0;
//Inicia cada linha com os blocos adequados (13:30, 14:00, etc.)
var vet_linhas = {};
for(i = 0; i < blocos.length; i++){
vet_linhas[blocos[i]] = "<tr><td>"+blocos[i]+"</td>";
}
var i;
//Para cada dia, verifique se deve colocar um horário em uma das linhas e ajusta o seu tamanho (rowspan)
for(dia in horarios){
for(i = 0; i < blocos.length; i++){
if(vet_i[dia] == i){
var rowspan = 1;
while(horarios[dia][blocos[vet_i[dia] ]] == horarios[dia][blocos[ vet_i[dia] +1 ]]){
vet_i[dia]++;
rowspan++;
}
vet_linhas[blocos[i]] +="<td rowspan="+rowspan+">"+ (horarios[dia][blocos[ vet_i[dia] ]])+"</td>";
vet_i[dia]++;
}
}
}
//Mescla as linhas e as adiciona na tabela principal
var auxStr = "";
for(i = 0; i < blocos.length; i++){
vet_linhas[blocos[i]] += "</tr>";
auxStr+=vet_linhas[blocos[i]];
}
cron.innerHTML += "<tbody>"+auxStr+"</tbody>";
/*--------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
//Preenche a versao do cronograma para mobile
var cron = document.getElementById("cronograma-mobile");
var i;
var auxStr = "";
for(dia in horarios){
auxStr+=dia+":<ul>";
for(i = 0; i < blocos.length; i++){
auxStr+="<li><b>"+blocos[i]+"</b>: "+horarios[dia][blocos[i]]+"</li>";
}
auxStr+="</ul>";
}
cron.innerHTML+=auxStr;
/*--------------------------------------------------------------------------------------------------*/
</script>
</body>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment