jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-15 13:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some more styling done

Browse Source
This commit is contained in:
Fabian Affolter 2015-10-17 15:06:13 +02:00
parent 47eb47e57d
commit 9702d39c42
1 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
source/components/index.markdown
View File

@ -58,7 +58,7 @@ $(window).load(function(){
} }
}); });
$('.componentFilter a').click(function(){ $('.filter-button-group').on('click', 'button', function() {
$('.componentFilter .current').removeClass('current'); $('.componentFilter .current').removeClass('current');
$(this).addClass('current'); $(this).addClass('current');
@ -73,6 +73,7 @@ $(window).load(function(){
}); });
return false; return false;
}); });
}); });
</script> </script>
@ -84,17 +85,16 @@ Components add support for devices, automation, and much much more to Home Assis
Entities are things that you want to observe within Home Assistant. Support for these things are provided by the entity components [Light](/components/light.html), [Switch](/components/switch.html), [Thermostat](/components/thermostat.html), [Media player](/components/media_player.html), [Device tracker](/components/device_tracker.html), and [Sun](/components/sun.html). Entities are things that you want to observe within Home Assistant. Support for these things are provided by the entity components [Light](/components/light.html), [Switch](/components/switch.html), [Thermostat](/components/thermostat.html), [Media player](/components/media_player.html), [Device tracker](/components/device_tracker.html), and [Sun](/components/sun.html).
<div class="button-group filter-button-group">
<button class="btn" data-filter="*">All</button>
<div class="componentFilter"> <button class="btn" data-filter=".light">Light</button>
<a href="#" data-filter="*" class="btn current">All</a> <button class="btn" data-filter=".sensor">Sensor</button>
<a class="btn" href="#" data-filter=".sensor">Sensor</a> <button class="btn" data-filter=".switch">Switch</button>
<a class="btn" href="#" data-filter=".switch">Switch</a> <button class="btn" data-filter=".media">Media player</button>
<a class="btn" href="#" data-filter=".media">Media player</a> <button class="btn" data-filter=".presence">Presence</button>
<a class="btn" href="#" data-filter=".presence">Presence</a> <button class="btn" data-filter=".notify">Notify</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(document).on('ready',function(){ $(document).on('ready',function(){
@ -104,28 +104,33 @@ var data = [
{"name": "Insteon", "type": "switch", "image": "insteon.png", "details": "isy994.html"}, {"name": "Insteon", "type": "switch", "image": "insteon.png", "details": "isy994.html"},
{"name": "Owntracks", "type": "presence", "image": "owntracks.png", "details": "device_tracker.owntracks.html"}, {"name": "Owntracks", "type": "presence", "image": "owntracks.png", "details": "device_tracker.owntracks.html"},
{"name": "Kodi", "type": "media", "image": "kodi.png", "details": "media_player.kodi.html"}, {"name": "Kodi", "type": "media", "image": "kodi.png", "details": "media_player.kodi.html"},
{"name": "Philips Hue", "type": "light", "image": "philips_hue.png", "details": "light.hue.html"},
{"name": "MPD", "type": "media", "image": "mpd.png", "details": "media_player.mpd.html"}, {"name": "MPD", "type": "media", "image": "mpd.png", "details": "media_player.mpd.html"},
{"name": "Arduino", "type": "sensor", "image": "arduino.png", "details": "sensor.arduino.html"}, {"name": "Arduino sensor", "type": "sensor", "image": "arduino.png", "details": "sensor.arduino.html"},
{"name": "Arduino", "type": "switch", "image": "arduino.png", "details": "switch.arduino.html"}, {"name": "Arduino switch", "type": "switch", "image": "arduino.png", "details": "switch.arduino.html"},
{"name": "MQTT", "type": "sensor", "image": "mqtt.png", "details": "sensor.mqtt.html"}, {"name": "MQTT sensor", "type": "sensor", "image": "mqtt.png", "details": "sensor.mqtt.html"},
{"name": "MQTT", "type": "switch", "image": "mqtt.png", "details": "switch.mqtt.html"}, {"name": "Sonos", "type": "media", "image": "sonos.png", "details": "media_player.sonos.html"},
{"name": "MySensors", "type": "sensor", "image": "mysensors.png", "details": "sensor.mysensors.html"},
{"name": "MQTT switch", "type": "switch", "image": "mqtt.png", "details": "switch.mqtt.html"},
{"name": "Telegram", "type": "notify", "image": "telegram.png", "details": "notify.telegram.html"},
{"name": "Blinkstick", "type": "light", "image": "blinkstick.png", "details": "light.blinksticklight.html"},
{"name": "TP-Link", "type": "presence", "image": "tp-link.png", "details": "device_tracker.tplink.html"},
{"name": "PushOver", "type": "notify", "image": "pushover.png", "details": "notify.pushover.html"},
{"name": "XMPP", "type": "notify", "image": "xmpp.png", "details": "notify.xmpp.html"},
{"name": "PushBullet", "type": "notify", "image": "pushbullet.png", "details": "notify.pushbullet.html"},
]; ];
$.map(data, function(component, index) { $.map(data, function(component, index) {
console.log(component.name, component.type, component.image, component.description);
$("div.componentContainer").append('<div class="' + component.type + '">' + $("div.componentContainer").append(
'<img src="/images/supported_brands/' + component.image + '" class="brand" />' + '<p>' + component.name + '</p>' + '</div></div>'); '<div style="width:120px;height:110px;margin:3px;padding:5px;border:1px solid #8c8c8c;background-color:#f7f7f7;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;" class="' + component.type + '">' + '<a href="/components/' + component.details + '"><img src="/images/supported_brands/' + component.image + '" class="brand overview" />' +
'<a href="/components/' + component.details + '">' + component.name + '</a></div>');
}); });
}); });
</script> </script>
<div class="componentContainer"></div> <div class="componentContainer"></div>
<br />
<p class='note'> <p class='note'>
Support for these services is provided by the Home Assistant community and not the service providers. Support for these services is provided by the Home Assistant community and not the service providers.
</p> </p>