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-13 04:16:48 +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

51
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');
$(this).addClass('current');
@ -72,7 +72,8 @@ $(window).load(function(){
}
});
return false;
});
});
});
</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).
<div class="componentFilter">
<a href="#" data-filter="*" class="btn current">All</a>
<a class="btn" href="#" data-filter=".sensor">Sensor</a>
<a class="btn" href="#" data-filter=".switch">Switch</a>
<a class="btn" href="#" data-filter=".media">Media player</a>
<a class="btn" href="#" data-filter=".presence">Presence</a>
<div class="button-group filter-button-group">
<button class="btn" data-filter="*">All</button>
<button class="btn" data-filter=".light">Light</button>
<button class="btn" data-filter=".sensor">Sensor</button>
<button class="btn" data-filter=".switch">Switch</button>
<button class="btn" data-filter=".media">Media player</button>
<button class="btn" data-filter=".presence">Presence</button>
<button class="btn" data-filter=".notify">Notify</button>
</div>
<script type="text/javascript">
$(document).on('ready',function(){
@ -104,28 +104,33 @@ var data = [
{"name": "Insteon", "type": "switch", "image": "insteon.png", "details": "isy994.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": "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": "Arduino", "type": "sensor", "image": "arduino.png", "details": "sensor.arduino.html"},
{"name": "Arduino", "type": "switch", "image": "arduino.png", "details": "switch.arduino.html"},
{"name": "MQTT", "type": "sensor", "image": "mqtt.png", "details": "sensor.mqtt.html"},
{"name": "MQTT", "type": "switch", "image": "mqtt.png", "details": "switch.mqtt.html"},
{"name": "Arduino sensor", "type": "sensor", "image": "arduino.png", "details": "sensor.arduino.html"},
{"name": "Arduino switch", "type": "switch", "image": "arduino.png", "details": "switch.arduino.html"},
{"name": "MQTT sensor", "type": "sensor", "image": "mqtt.png", "details": "sensor.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) {
console.log(component.name, component.type, component.image, component.description);
$("div.componentContainer").append('<div class="' + component.type + '">' +
'<img src="/images/supported_brands/' + component.image + '" class="brand" />' + '<p>' + component.name + '</p>' + '</div></div>');
$("div.componentContainer").append(
'<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>
<div class="componentContainer"></div>
<br />
<p class='note'>
Support for these services is provided by the Home Assistant community and not the service providers.
</p>