Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mostrar y ocultar dependiendo del tamaño del código #10

Open
IsraelDCastro opened this issue Feb 20, 2020 · 1 comment
Open

Mostrar y ocultar dependiendo del tamaño del código #10

IsraelDCastro opened this issue Feb 20, 2020 · 1 comment

Comments

@IsraelDCastro
Copy link 

<div id="wrapper">
	<div id="products-content">
		<div class="columns">
			<aside class="column is-12-mobile is-3-desktop box-sidebar">
				<div v-if="mobileShowSearch" class="inner-search">
					<h3>Buscador</h3>
					<button class="search-button button" @click="show()">
						<i class="fas fa-search"></i>
						Cambiar
					</button>
				</div>
				<div v-if="formSidebar" class="form-sidebar">
					<h3>Buscador</h3>
					<form class="search-sidebar-form">
						<div class="field">
							<label class="label">Vehículos</label>
							<div class="select">
						    	<select v-model="carType">
						    		<option value="Carro">Carro</option>
						    		<option value="Motor">Motor</option>
						    		<option value="Barco">Barco</option>
							    </select>
							</div>
						</div>
						<div v-if="carType === 'Carro'">
							<div class="field">
								<label class="label">Tipo de Vehículo</label>
								<div class="select">
							    	<select>
							    		<option>Todos</option>
							    		<option>Sedan</option>
							    		<option>Suv</option>
							    		<option>Coupe</option>
							    		<option>Minivan</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Marca</label>
								<div class="select">
							    	<select>
							    		<option>Todas las Marcas</option>
							    		<option>Marca 1</option>
							    		<option>Marca 2</option>
							    		<option>Marca 3</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Modelo</label>
								<div class="select">
							    	<select>
							    		<option>Todas los modelos</option>
							    		<option>Modelo 1</option>
							    		<option>Modelo 2</option>
							    		<option>Modelo 3</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Provincias</label>
								<div class="select">
							    	<select>
							    		<option>Todas las Provincias</option>
							    		<option>La Altagracia</option>
							    		<option>La Romana</option>
							    		<option>El Seibo</option>
							    		<option>Hato Mayor</option>
								    </select>
								</div>
							</div>
							<div class="field mid-field">
								<label class="label">Condición</label>
								<div class="select">
							    	<select>
							    		<option>Todas</option>
							    		<option>Nuevo</option>
							    		<option>Usado</option>
								    </select>
								</div>
							</div>
							<div class="field mid-field">
								<label class="label">Estado</label>
								<div class="select">
							    	<select>
							    		<option>Cualquiera</option>
							    		<option>En Venta</option>
							    		<option>En Renta</option>
							    		<option>Venta y/o Alquiler</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Provincias</label>
								<div class="select">
							    	<select>
							    		<option>Todas las Provincias</option>
							    		<option>La Altagracia</option>
							    		<option>La Romana</option>
							    		<option>El Seibo</option>
							    		<option>Hato Mayor</option>
								    </select>
								</div>
							</div>
							<a class="advanced-search button is-primary outline" @click="advancedSearchShow()">
								<i class="fas fa-plus"></i>
								Busqueda Avanzada
							</a>
							<div v-if="advancedSearch" class="box-advanced-search">
								<div class="field">
									<label class="label">Combustible</label>
									<div class="select">
								    	<select>
								    		<option>Todos</option>
								    		<option>Gasolina</option>
								    		<option>Gas</option>
									    </select>
									</div>
								</div>
								<div class="field">
									<label class="label">Transmisión</label>
									<div class="select">
								    	<select>
								    		<option>Todas</option>
								    		<option>La Altagracia</option>
								    		<option>La Romana</option>
								    		<option>El Seibo</option>
								    		<option>Hato Mayor</option>
									    </select>
									</div>
								</div>
								<div class="field">
									<label class="label">Tracción</label>
									<div class="select">
								    	<select>
								    		<option>Todas</option>
								    		<option>Delantera</option>
								    		<option>Trasera</option>
								    		<option>La Romana</option>
								    		<option>Hato Mayor</option>
									    </select>
									</div>
								</div>
								<div class="field">
									<label class="label">Vendedor</label>
									<div class="select">
								    	<select>
								    		<option>Todas las Provincias</option>
								    		<option>La Altagracia</option>
								    		<option>La Romana</option>
								    		<option>El Seibo</option>
								    		<option>Hato Mayor</option>
									    </select>
									</div>
								</div>
							</div>
						</div>
						<div v-else-if="carType === 'Motor'">
							<div class="field">
								<label class="label">Tipo de Motor</label>
								<div class="select">
							    	<select>
							    		<option>Todos</option>
							    		<option>FourWheel</option>
							    		<option>Motor</option>
							    		<option>Pasola</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Marca</label>
								<div class="select">
							    	<select>
							    		<option>Yamaha</option>
							    		<option>Suzuki</option>
							    		<option>PGO</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Modelo</label>
								<div class="select">
							    	<select>
							    		<option>Modelo 1</option>
							    		<option>Modelo 2</option>
							    		<option>Modelo 3</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Condición</label>
								<div class="select">
							    	<select>
							    		<option>Todas</option>
							    		<option>Nuevo</option>
							    		<option>Usado</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Provincias</label>
								<div class="select">
							    	<select>
							    		<option>Todas las Provincias</option>
							    		<option>La Altagracia</option>
							    		<option>La Romana</option>
							    		<option>El Seibo</option>
							    		<option>Hato Mayor</option>
								    </select>
								</div>
							</div>
							<a class="advanced-search button is-primary outline" @click="advancedSearchShow()">
								<i class="fas fa-plus"></i>
								Busqueda Avanzada
							</a>
							<div v-if="advancedSearch" class="box-advanced-search">
								<div class="field">
									<label class="label">Motor CC</label>
									<div class="select">
								    	<select>
								    		<option>50 CC</option>
								    		<option>70 CC</option>
								    		<option>90 CC</option>
								    		<option>100 CC</option>
								    		<option>110 CC</option>
								    		<option>125 CC</option>
								    		<option>150 CC</option>
								    		<option>200 CC</option>
								    		<option>250 CC</option>
								    		<option>300 CC</option>
									    </select>
									</div>
								</div>
								<div class="field">
									<label class="label">Vendedor</label>
									<div class="select">
								    	<select>
								    		<option>Todas las Provincias</option>
								    		<option>La Altagracia</option>
								    		<option>La Romana</option>
								    		<option>El Seibo</option>
								    		<option>Hato Mayor</option>
									    </select>
									</div>
								</div>
							</div>
						</div>
						<div v-else-if="carType === 'Barco'">
							<div class="field">
								<label class="label">Marca</label>
								<div class="select">
							    	<select>
							    		<option>Marca 1</option>
							    		<option>Marca 2</option>
							    		<option>Marca 3</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Eslora</label>
								<div class="control">
								    <input class="input" type="number" placeholder="1 M">
								</div>
							</div>
							<div class="field">
								<label class="label">Modelo</label>
								<div class="select">
							    	<select>
							    		<option>Modelo 1</option>
							    		<option>Modelo 2</option>
							    		<option>Modelo 3</option>
								    </select>
								</div>
							</div>
							<div class="field">
								<label class="label">Provincias</label>
								<div class="select">
							    	<select>
							    		<option>Todas las Provincias</option>
							    		<option>La Altagracia</option>
							    		<option>La Romana</option>
							    		<option>El Seibo</option>
							    		<option>Hato Mayor</option>
								    </select>
								</div>
							</div>
							<a class="advanced-search button is-primary outline" @click="advancedSearchShow()">
								<i class="fas fa-plus"></i>
								Busqueda Avanzada
							</a>
							<div v-if="advancedSearch" class="box-advanced-search">
								<div class="field">
									<label class="label">Combustible</label>
									<div class="select">
								    	<select>
								    		<option>Todas las Provincias</option>
								    		<option>La Altagracia</option>
								    		<option>La Romana</option>
								    		<option>El Seibo</option>
								    		<option>Hato Mayor</option>
									    </select>
									</div>
								</div>
								<div class="field">
									<label class="label">Vendedor</label>
									<div class="select">
								    	<select>
								    		<option>Todas las Provincias</option>
								    		<option>La Altagracia</option>
								    		<option>La Romana</option>
								    		<option>El Seibo</option>
								    		<option>Hato Mayor</option>
									    </select>
									</div>
								</div>
							</div>
						</div>
						<div class="field text-right">
							<button class="button is-primary">Buscar</button>
						</div>
					</form>
				</div>
				<div class="change-role">
					<h4>¿Eres propietario de una empresa?</h4>
					<p>Regístrala gratis y haz que tu marca e inventario lleguen mas lejos y a mas personas de una forma rápida, segura y sencilla.</p>
					<a href="/pages/sale.html" class="button is-second">Registrarme</a>
				</div>
			</aside>
			<div class="column box-content">
				<div class="filter-content">
					<form action="" class="filter-form">
						<div class="radio-group">
							<div class="radio-inner">
								<label for="grid">
									<input class="radio-control" type="radio" v-model="gridOrList" id="grid" name="view" value="Grid View" checked>
									<span><i class="fas fa-th-large"></i></span>
								</label>
							</div>
							<div class="radio-inner">
								<label for="list">
									<input class="radio-control" type="radio" v-model="gridOrList" id="list" name="view" value="List View">
									<span><i class="fas fa-th-list"></i></span>
								</label>
							</div>
						</div>
						<div class="select">
							<label for="">Ordernar por: &nbsp;</label>
							<select name="select-view" class="select-view" id="">
								<option value="Default">Por Defecto</option>
								<option value="A to Z">A a Z</option>
								<option value="Z to A">Z a A</option>
							</select>
						</div>
					</form>
				</div>
				<hr>
				<div class="products-content" :class="gridOrList2">
	                <% @cars.each do |car| %>
	                  <a href="<%= listing_path(car) %>" class="prod-link">
							<article class="car-prod">
							
								<div class="img-prod">
									<%= image_tag listing_cover(car) %>
								</div>
								<div class="content-info">
	                                
									<h4 class="prod-title"><%= car.title %></h4>
									<div class="prod-status">
										<p>2020 / Nuevo / Diesel</p>
									</div>
									<p class="price">
										<span>Venta</span> RD$ 350,000
									</p>
									<p v-if="listView">Vendedor: Persona</p>
									<p v-if="listView"> Provincia: <%= car.user.province ? "#{car.user.province}" : "No agregada." %></p>
								</div>
							</article>
						</a>
	                <% end %>
	            </div>
				<div class="pagination-content">
					<ul class="pagination-list inner-pagination">
						<li>
							<a href="#" class="pagination-previous">
								<i class="fas fa-chevron-left"></i>&#160;Anterior
							</a>
						</li>
						<li>
							<a href="#" class="pagination-link active">1</a>
						</li>
						<li>
							<a href="#" class="pagination-link">2</a>
						</li>
						<li>
							<a href="#" class="pagination-link">4</a>
						</li>
						<li>
							<a href="#" class="pagination-link">3</a>
						</li>
						<li>
							<a href="#" class="pagination-link">5</a>
						</li>
						<li>
							<a href="#" class="pagination-next">
								Siguiuiente&#160;<i class="fas fa-chevron-right"></i>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

const product = new Vue({
	el: '#products-content',
	data: {
		gridOrList: 'Grid View',
		view: false,
		carType: 'Carro',
		advancedSearch: false,
		windowWidth: window.innerWidth,
		formSidebar: true
	},
	mounted() {
	    window.onresize = () => {
	        this.windowWidth = window.innerWidth
	     }
	},
	computed: {
		gridOrList2 () { 
			return this.gridOrList === "List View" ? "list-view" : "grid-view"
		},
		listView() {
			if (this.gridOrList === "List View") {
				return true
			}
		},
		mobileShowSearch() {
	    	return this.windowWidth <= 767
	    },
	    algoSeOculta() {
	    	if (this.windowWidth <= 767)
		    	return this.formSidebar = false
		    else
		    	return this.formSidebar = true
	    }

	},
	methods: {
		advancedSearchShow() {
			this.advancedSearch = !this.advancedSearch
		},
		show() {
	    	this.formSidebar = !this.formSidebar
	    }
	}
})
@manuelojeda
Copy link

manuelojeda commented Feb 20, 2020 •
edited
Loading

Puedes cambiar el handle del tamaño haciendo algo similar a esto.
En created o mounted:
window.addEventListener('resize', this.handleVisibility)

Y en methods agrega algo así:

handleVisibility () {
      this.formSidebar = window.innerWidth >= 768
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@IsraelDCastro @manuelojeda