How to place the picure where i want it in skeleton - responsive-design

I need help with skeleton # http://www.slutatnian.se/skolor/nosnas/
On the site there is a picture that is below the code and that works fine when im on a computer. But if im using a mobile device the picture will get on the bottom off the screen, and i want the picture to be after "Nösnäsgymnasiumet" on a mobile device but how do i do that?
(Don't mind the hotpink, im using it the see the columns)
here is the html code.
<div class ="container">
<div class="nosnastitel">
<div class="eleven columns offset by one alpha" style="background-color:hotpink">
<h3>Nösnäsgymnasiumet.</h3>
</div>
</div>
<div class="six columns offset-by-one " style="background-color:hotpink">
<div class="infonosnas">
<h4> Om Nösnäsgymnasiet </h4>
<h5> Utbildning för dig </h5>
<p> Nösnäsgymnasiet är en skola med stort utbildningsutbud, många möjligheter, kompetens och engagemang. Vi har som målsättning att du som elev skall känna dig trygg på vår skola och få en utbildning som ger dig en bra start för framtiden. </p>
<br/>
<h5> Gemenskap och trivsel </h5>
<p> Här finns något för alla!
Vi har ett stort utbud av högskoleförberedande program, yrkesprogram, introduktionsprogram, lärlingsutbildning och gymnasiesärskola.
Hos oss kan du förbereda dig för högskolestudier eller yrkesliv, utveckla dina estetiska förmågor eller inrikta dig inom bland annat ekonomi, data, teknik och media. </p>
<br />
<h5>Många valmöjligheter </h5>
<p>Nära hav och natur
Skolan ligger på det vackra västkusten i lummig grönska och med utsikt över Hakefjorden. Ett stenkast bort finns salta bad, naturstigar och friskvårdsanläggning med simhall och idrottsplats. </p>
<p>I skolans centrala del ligger administrationen och elevbiblioteket som är öppet varje dag. Det finns också ett elevcafé och två skolmatsalar. Med några minuters promenadväg från Stenungsunds centrum har du snabb tillgång till buss och tåg. </p>
</div>
</div>
<div class="four columns offset-by-five omega">
<div class="nosnasbild">
<img src="skola2.jpg" alt="nosnasbild" /> </a>
</div>
</div>
</div>

Solved it by adding two of the same picture but with different classes. After that I used I added
.nosnasbild img{
display: none;
}
in the CSS.
And the other I used as media query, and used
.nosnaspic img{
display: none;
}
It's not the most optimal solution but it works fine.

Related

Add a PDF file in Gatsby

Pretty new to Gatsby here, and trying to build my portfolio pour profesional purpose. One issue tho: I'm not sure of the different steps to take on how to add a pdf file in a specific page (and on click, the user can consult it on another tab). Here is my repo link: https://github.com/chrisnopa/new_portfolio/tree/master/cdn
Let's say I wanna add my resume on the "about" page:
import React from 'react'
import Layout from '../components/layout/layout'
import SecImg1 from '../images/about/sticky.jpg'
import SecImg2 from '../images/about/uxui.jpg'
const About = () => (
<Layout>
<section className="section-double">
<div className="section-content">
<h3>A propos</h3>
<h2>Résolution & méthode</h2>
{/* <a
class="btn"
href="/cv-français.pdf"
download="cv-français.pdf"
target="_blank"
>
<span>
<span>
<span>Consulter mon CV</span>
</span>
</span>
</a> */}
<p>
J’apprécie l'idée de prendre quelque chose de complexe et de le
décomposer en parties plus digestes, et surtout plus intelligibles.
Comprendre les variables en jeu et travailler sur la solution. J' ai
eu une brève vie en tant que responsable de production dans
l’audiovisuel et j'ai découvert assez que ce n'était pas le genre de
problèmes qui m'intéressaient. Par la suite, je me suis lancé dans la
<span id="fancy-word"> gestion de projets digitaux</span> pour différentes
entités.
</p>
<p>
Le tournant est venu lorsque j'ai découvert l'UX et les processus structurés de conception
<span id="fancy-word"> tournée vers et avec l'utilisateur</span>.
</p>
<p>
<strong id="fancy-word">CV COMING SOON</strong>
</p>
</div>
<div className="section-img">
<img src={SecImg1} alt="UX/UI" />
</div>
</section>
<section className="section-double section-reverse">
<div className="section-content">
<h3>Vision du design</h3>
<h2>Comprendre & itérer</h2>
<p>
Je crois qu'accepter de passer du temps à examiner le problème, c'est
déjà être en train de le résoudre. Essayer de comprendre quoi, quand, comment et surtout pourquoi est pour moi le meilleur indicateur design, celui de l'utilité.
</p>
</div>
<div className="section-img">
<img src={SecImg2} alt="UX/UI" />
</div>
</section>
</Layout>
)
export default About
How could I do it? I'v seen this code sample on Stack, tried it but didn't work:
import React from "react"
import downloadFile from '../downloads/file.pdf'
const IndexPage = () => (
<>
<a href={downloadFile} download>Download the imported file</a>{` `}
<a href={`download.pdf`} download>Download the file from the static folder</a>
</>
)
export default IndexPage
If anyone knows how to add a quick fix on this, it would be gladly appreciated!
Did you create a static folder in your project root and added that PDF there? If so, that file will be copied on build to /src/public/static and you will be able to link to it using:
Download the file from the static folder
Having said that, I think the better way is to query for the file in combination with gatsby-source-filesystem as described here.

orderBy in angularjs in ng-repeat

I don't understand why it's not working do you have an idea why orderBy'-nbtickets' not working ?
<ul ng-repeat="item in customarray | orderBy:'-nbtickets' track by $index">
<li ui-sref="app.usersingle({id:item[0].id,iterate:1})" class="row organization">
<div class="col-md-2 classement text-center">{{$index+1}}</div>
<div class="name col-md-4 text-center">{{item[0].username}}</div>
<div class="col-md-2 total text-center">{{item[0].nbtickets}}</div>
<div class="col-md-2 maintenance text-center">{{item[0].tickmaintenance}}</div>
<div class="col-md-2 assistance text-center">{{item[0].tickassistance}}</div>
</li>
</ul>
in my controler i just do that:
$scope.customarray = data;
Here the array i display it by doing {{item}}(parse of my array which is preatty big)
[
{"username":"Eugenie Martin","tickassistance":4,"tickbug":0,"tickmaintenance":3,"nbtickets":7,"id":660302971,"tickets":[{"date":"2015-09-29T07:12:14Z","titre":"Changement date de clôture dossier Barbe Alain","status":"closed","tag":"maintenance"},
{"date":"2015-09-04T09:45:20Z","titre":"43325- NH DISTRIBUTION","status":"closed","tag":"assistance"},
{"date":"2015-08-20T06:18:04Z","titre":"TR: EURL NH DISTRIBUTION vous a envoyé un message depuis sa plateforme","status":"closed","tag":"assistance"},{"date":"2015-02-25T16:00:46Z","titre":"Votre demande au support sans suite","status":"closed","tag":"assistance"},
{"date":"2015-01-12T06:48:35Z","titre":"Bonjour,\n\nle cabinet AUFICOM aura un stand lors du...","status":"closed","tag":"assistance"},
{"date":"2014-12-18T09:48:38Z","titre":"ISACOMPTA","status":"closed","tag":"maintenance"},{"date":"2014-12-15T14:08:08Z","titre":"changement date de clôture","status":"closed","tag":"maintenance"}],
"monthly":[{"now11":0,"assist":0,"maint":0},
{"now10":0,"assist":0,"maint":0},
{"now9":1,"assist":1,"maint":0},
{"now8":2,"assist":1,"maint":1},
{"now7":0,"assist":0,"maint":0},
{"now6":0,"assist":0,"maint":0},
{"now5":0,"assist":0,"maint":0},
{"now4":0,"assist":0,"maint":0},
{"now3":0,"assist":0,"maint":0},
{"now2":0,"assist":0,"maint":0},
{"now1":0,"assist":0,"maint":0},
{"now":0,"assist":0,"maint":0}]},
[{"date":"2015-09-29T07:12:14Z","titre":"Changement date de clôture dossier Barbe Alain","status":"closed","tag":"maintenance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-09-04T09:45:20Z","titre":"43325- NH DISTRIBUTION","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-08-20T06:18:04Z","titre":"TR: EURL NH DISTRIBUTION vous a envoyé un message depuis sa plateforme","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-02-25T16:00:46Z","titre":"Votre demande au support sans suite","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2015-01-12T06:48:35Z","titre":"Bonjour,\n\nle cabinet AUFICOM aura un stand lors du...","status":"closed","tag":"assistance","id":660302971,"name":"Eugenie Martin"},
{"date":"2014-12-18T09:48:38Z","titre":"ISACOMPTA","status":"closed","tag":"maintenance","id":660302971,"name":"Eugenie Martin"},
{"date":"2014-12-15T14:08:08Z","titre":"changement date de clôture","status":"closed","tag":"maintenance","id":660302971,"name":"Eugenie Martin"}]
];
Have you tried?
<ul ng-repeat="item in customarray | orderBy:'nbtickets':true track by $index">
There is a reverse option in angular orderBy which is the :true part above.
Have you tried orderBy:-item[0].nbtickets ?

ng-class expression not working with parameter coming from httpresponse

I have a servlet that returns a JSON object with a parameter named "valoracion" and I want to use it for a span label to be a css class with the name of the value associated to that parameter. This I want to do it to show a .gif in a different way depending on this class. I'm using AngularJS, btw.
This is the js code from the "novedades" page controller:
angular.module('myApp')
.controller('novedadesCtrl', [ '$scope','auth', 'novedadesService', function($scope,auth,novedadesService){
$scope.mostrar = ["Comentarios","Valoraciones"];
$scope.novedades = "Comentarios";
$scope.novedadesComentarios;
$scope.novedadesValoraciones;
$scope.cogerNovedades = function(){
debugger;
novedadesService.novedades( auth.idUser(), function(comentarios,valoraciones) {
$scope.novedadesComentarios = comentarios;
console.log(valoraciones);
$scope.novedadesValoraciones = valoraciones;
});
};
$scope.cogerNovedades();
}]);
novedadesService.novedades is a factory that sends a POST request to the servlet and returns the same JSON returned by the servlet. This is an example of the aforementioned JSON:
idJuego: 0
idUsuario: 500
juego: "Star Wars: The Old Republic"
nombreApellidos: "Gregorio de Miguel"
nombreUsuario: "Goyo"
valoracion: "cuatroEstrella"
This other one is the html code for that page:
<div class="container" id="cuerpo">
<h1 class="theme-color-text font">Novedades</h1>
<div class="row form-inline">
<div class="form-group" style="float: right;">
<label for="mostrar">Mostrar: </label>
<select id="mostrar" class="form-control" ng-model="novedades"
ng-options="x for x in mostrar">
</select>
</div>
</div>
<!-- lista de novedades de comentarios -->
<div ng-if="novedades == 'Comentarios'" class="row">
<ul class="list-group" id="novedades">
<li class="list-group-item" ng-repeat="comentario in novedadesComentarios">
{{comentario.nombreUsuario}}
({{comentario.nombreApellidos}}) ha comentado el juego
{{comentario.juego}}</li>
</ul>
</div>
<!-- lista de novedades de valoraciones -->
<div ng-if="novedades == 'Valoraciones'" class="row">
<ul class="list-group" id="novedades">
<li class="list-group-item" ng-repeat="valoracion in novedadesComentarios">
{{valoracion.nombreUsuario}}
({{valoracion.nombreApellidos}}) ha valorado el juego
{{valoracion.juego}}
con <span ng-class="{{valoracion.valoracion}}"></span></li>
</ul>
</div>
This is the part where I have the problem:
<span ng-class="{{valoracion.valoracion}}"></span>
The following is an example from the css we want the page to show:
.cuatroEstrella{
display: inline-block;
margin-bottom: -10px;
width: 100px;
height: 30px;
background: url("../img/valoracion.gif") 0 -262px;
}
Here you have a screenshot from the page. You can see the problem in the developers console.
I appreciate any help you can provide on this issue.
Don't need to use the {{}}, just like this :
<span ng-class="valoracion.valoracion"></span>
Bad copy/paste ;). You are iterating through 'novedadesComentarios' instead through 'novedadesValoraciones'. You are doing this:
<li class="list-group-item" ng-repeat="valoracion in novedadesComentarios">
{{valoracion.nombreUsuario}}
({{valoracion.nombreApellidos}}) ha valorado el juego
{{valoracion.juego}}
con <span ng-class="{{valoracion.valoracion}}"></span>
</li>
And I think you want to do this:
<li class="list-group-item" ng-repeat="valoracion in novedadesValoraciones">
{{valoracion.nombreUsuario}}
({{valoracion.nombreApellidos}}) ha valorado el juego
{{valoracion.juego}}
con <span ng-class="valoracion.valoracion"></span>
</li>
Update
I had forgotten to say that you still have to do what #Mike Vranckx said and remove the {{}}

angular-google-maps - How to use ng-repeat directive in ui-gmap-window tag?

I need to use a ng-repeat directive into an ui-gmap-window item but it does not work.
<ui-gmap-google-map center="search.map.center" zoom="search.map.zoom" draggable="true" >
<ui-gmap-marker ng-repeat="position in search.positions" idKey="position.name" coords='position.coords' options="title='{{position.name}}'" >
<ui-gmap-window ng-show="position.show" onclick="position.show = !position.show" closeClick="'closeClick'" ng-cloak isIconVisibleOnClick='true' >
<div ng-controller="InfoWindowInMarkerController">
<h4>{{position.name}}</h4>
<div ng-if="! position.isGroup">
<!-- code that display the information of a unique member -->
</div>
<div ng-else>
<p>{{position.isGroup ? "Veuillez voir ci-dessous les personnes associées en utilisant les filtres de recherche pour limiter à la ville souhaitée" : ""}}</p>
<!-- below the ng-repeat that didn't work -->
<div ng-repeat="p in position.persons">{{p}}</div>
<br><br><br><br>
<br>
</div>
</div>
</ui-gmap-window>
<!--<marker-label content="position.name" anchor="22 0" class="marker-labels"/>-->
</ui-gmap-marker>
Could you please tell me how to do ?
Please find below a link to the plunker that illustrate my problem :
http://plnkr.co/edit/EinFCPEsdhS94ssPHEF2?p=preview
Thanks in advance.

Recover value of field in ng-repeat

Sorry for the english, i'm french student :(
I would like create a comment system with AngularJS for a project.
I would like recover a value of an object who is in ng-repeat loop.
JSON : https://drive.google.com/file/d/0Bzj557dnogzOd0ZUMnZ1cWZLSFU/edit?usp=sharing
HTML :
<section ng-controller='AnnouncesCtrl' ng-show='!showActions' ng-swipe-left='showActions=true'>
<header class='header'>
<span class="return"><a href='#newAnnounce'>8</span>
</header>
<div class='loader' ng-show='loader'></div>
<section class='panel'>
<div ng-repeat='a in dept.announce' class='announces'>
<span class='title'>{{a.name}}</span>
<br/>
<span class="date">{{a.date}}</span>
<hr>
<span class="msg">{{a.desc}}</span>
<hr>
<div class="showrep" ng-click="show=true" ng-show='!show'>Montrer les réponses</div>
<div class="allrep" ng-show="show" ng-repeat='answer in a.answers'>{{answer}}<br/></div>
<div class="formrep">
<form ng-submit='addComments()'>
<input type='text' placeholder='Écrire une réponse'><input type='submit' ng-click='a.btn={{a.id}}' value='Répondre'>
</form>
</div>
</div>
</section>
JS :
function AnnouncesCtrl($scope,$http,$rootScope,$location){
$scope.getInfos=function(){
var dept="http://agence-pandor.fr/getAnnounces/index.php";
$scope.loader=true;
$http.get(dept)
.success(deptSuccess)
.error(function(){
$scope.loader=false;
alert('Impossible de récupérer le numéro étudiant. Veuillez vous reconnecter');
$location.url("/connexion"); // On redirige
})
}
deptSuccess=function(response){
$scope.loader=false;
$scope.dept=response;
}
$scope.getInfos();
$scope.addComments=function(){
alert($scope.dept.announce.btn);
}
}
Screenshot :
https://drive.google.com/file/d/0Bzj557dnogzOUDlfNWR3eEthQzA/edit?usp=sharing
I don't quite understand what your project is about (I don't know French). You are iterating over the array "announce" which is supposedly a property of "dept". When you type:
ng-repeat = 'a in dept.announce'
you are creating a temporary variable "a" in the scope that is meant for ng-repeat (like counter variable in a for loop).
If "btn" is supposed to be a unique value, then use:
ng-click = "btn = a.id"
or if "btn" is specific to each value of "a in announce", use:
ng-click = "btn[$index] = a.id";
You can get the value of btn in your JS file by using $scope.btn

Resources